Como posicionar uma div ao lado de outra div

Подписаться 135 тыс.

Просмотров 97 тыс.

50% 1

Neste vídeo você aprenderá como deixar duas divs lado a lado, ou seja, posicionar uma #div do lado de outra. Além de aprender os conceitos por trás do #HTML e #CSS que não possibilitam este comportamento de forma default.
Link do artigo: www.horadecodar.com.br/2020/0...
eBook: www.horadecodar.com.br/ebook-...
★ Nossos Cursos: horadecodar.com.br/cursos-hor...
✔ Nosso Blog: horadecodar.com.br/
▶ Instagram: @horadecodar
▶ Facebook: / horadecodar
▶ LinkedIn: / matheusbattisti
▶ GitHub: github.com/matheusbattisti/ 🔷 Telegram: t.me/horadecodar .
🟣 Discord Hora de Codar: / discord

Наука

Опубликовано:

14 июн 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 120

@MatheusBattisti Год назад

⭐ Conheça a nossa plataforma de cursos: www.horadecodar.com.br/comunidade-hora-de-codar/

@marlinho206 3 года назад

Não existe só o inline-block para deixar ao lado, tem também o float e o position. Seria legar também sobre o float e o position. Mais interessante ainda é fazer uma div dentro da outra, para também ficar mais claro e podermos aprender mais. Gostei muito da sua explicação, simples e fácil compreensão. Desde já agradeço pelo excelente trabalho. Que Deus continue te abençoando e trazendo mais aprendizado para todos.

@MatheusBattisti 3 года назад

opa Marlon, com certeza, ultimamente to utilizando bastante o flex mesmo, facilita muito...

@victorbonanho1980 2 года назад

O melhor é o flex

@MatheusBattisti 3 года назад

Confira o nosso catálogo de cursos: www.horadecodar.com.br/cursos-horadecodar/

@akutopllay2628 3 года назад

Matheus, como eu faria pra aplicar a ação do Display: inline-block em 2 divs (azul e cinza)da Barra de Navegação num documento de um site, e não aplicar nas futuras divs do resto do corpo do site?

@na_panfletos_e_cartoes 2 года назад

Matheus toda div por obrigação ela tem que estar num container ou pode ter outro elemento como classificação ou identificação ?

@mbs2488 3 года назад

Muito Bem Explicado, Parabéns !!

@juniorrosa8175 Год назад

Obrigado pela aula, simples e direta.

@Akakkas_ 10 месяцев назад

Obrigado pelos ensinamentos!

@matheuspereira5420 6 месяцев назад

top demais, muito bem explicado!!!

@filipesander7 3 года назад

Parabéns, que Deus te abençoe e continue te iluminando🙏👐

@MatheusBattisti 3 года назад

Valeu Filipe

@barbie1_.399 Год назад

SEU VIDEO ME SALVOU MUITOOO, OBRIGADAAAAA

@deboralopes6475 2 года назад

Explicação sem rodeios e clara! Obrigada ☺

@MatheusBattisti 2 года назад

de nada Debora =))

@ERICKCSCS 6 месяцев назад

Excelente explicação.

@tecnicoinformatico6893 Год назад

Parabéns pelo vídeo.

@Danilo32510 Год назад

ajudou de mais

@erasmoramos4204 2 года назад

Informações realmente preciosas... mt bom

@MatheusBattisti 2 года назад

valeuu Erasmo!

@flaviobendl2611 4 года назад

Parabéns! Assertivo na explicação.

@MatheusBattisti 4 года назад

valeu Flávio, dá uma olhada nos cursos tb, você vai gostar :)

@FilmaradaX 2 года назад

Muito bom! Estou começando nesse mundo de programação e pretendo me tornar um Dev Front-end! me ajudou dms

@agso8260 6 месяцев назад

como anda a vida de dev?

@edithpenha6788 3 года назад

Aula excelente ... me ajudou bastante ... obrigada

@MatheusBattisti 3 года назад

Valeu Edith

@claudionoroliveirasobrinho1259 Год назад

Também gostei muito, resolve o problema pontualmente, sem termos que assistir um processo todo apenas para ver essa parte. Obrigado!!!

@MatheusBattisti Год назад

valeu Claudionor!

@ivoaurelio1 2 года назад

Muito boa dica! Obrigado por compartilhar!

@MatheusBattisti 2 года назад

de nada Ivo!

@Aprenda_Facil 2 года назад

Assisti vários tutoriais sobre esse assunto, mas o seu foi o único que me ajudou.👍

@MatheusBattisti 2 года назад

show! =D

@xossy4791 4 года назад

Obrigado, passei muito tempo tentando resolver esse problema. Ganhou mais um escrito

@MatheusBattisti 4 года назад

boa Xossy, essa série é semanal, vamos aprender muitas coisas juntos ainda :D Enquanto ela não volta, se inscreve na Semana Carreira Dev: www.horadecodar.com.br/inscricao-semana-carreira-dev/ Abraço!

@octaviocorreia3361 2 года назад

Obrigado professor, ajudou bastante!

@MatheusBattisti 2 года назад

de nada Octavio!

@diegomota8523 2 года назад

Obrigado salvou muito !

@MatheusBattisti 2 года назад

de nada Diego!

@MsDiogocouto 2 года назад

Simplesmente grato .🙏

@MatheusBattisti 2 года назад

de nada!

@iarafernandes5850 2 года назад

Aaaah você me ajudou muitoooo 💛 Mas para deixar lado a lado eu usei no CSS o código: display: inline-block; vertical-align: top; E depois usei o seu esqueminha de -4px na margin-left para tirar o espaçamento estranho entre as divs

@megadownloads3407 2 года назад

obrigada, o código do vídeo não tava funcionando direito até tentei de outros vídeos e o seu deu certo.

@rxluanf 3 года назад

dixa: sempre q der aula deixa os cod nos comentarios, facilita mt pra qm é dev ja

@rapatricia31 3 года назад

Estou gostando muito desse conteúdo mais pontual, tratando de problemas que se encontra no dia a dia. Ótimo conteúdo, conheci seu canal através da Udemy, e já estou te acompanhando aqui no RU-vid também.

@MatheusBattisti 3 года назад

oi Patricia, obrigado por acompanhar e pelo feedback =)

@luisribeiro8741 3 года назад

@@MatheusBattisti qual teu curso no udemy

@MatheusBattisti 3 года назад

@@luisribeiro8741 opa, tem vários, segue o link: www.udemy.com/user/matheus-battisti/

@marialuizaferreira884 3 года назад

muito obrigada!! me salvou!

@MatheusBattisti 3 года назад

showw! =)

@ruanpaulo4583 3 года назад

Obrigado pela explicação! =D

@MatheusBattisti 3 года назад

de nada! =)

@user-antonioo 2 года назад

Valeu, passei por esse problema hoje e procurei até achar o seu canal e através do mesmo solucionar o problema que estava passando com a div. kkkkk

@MatheusBattisti 2 года назад

boa!

@carolinach1721 2 года назад

muito obg , explicou direitinho

@MatheusBattisti 2 года назад

valeu Carolina!

@carlosmarcelino6128 3 года назад

Muito bom o video, obg amigo

@MatheusBattisti 3 года назад

De nada Carlos!

@autovrum 2 года назад

Excelente, agradecido.

@MatheusBattisti 2 года назад

valeu!

@AnaSantos-gj2fh Год назад

E eu aqui quebrando a cabeça. Valeu a dica.

@MatheusBattisti Год назад

de nada Ana!

@isabellaoliveira4791 Год назад

TAO SIMPLES OBRIGADAAAAA

@MatheusBattisti Год назад

de nada Isabella!

@jaumvitor479 2 года назад

VOCÊ É FODA EU TE AMO

@MatheusBattisti 2 года назад

haha valeu Jaum!

@DanFelix-mb9zp 11 месяцев назад

bom dia, gostaria de saber se tem como colocar um espaço entre uma imagem abaixo da outra

@batepapodomaru439 Год назад

top das galaxias

@WhatubEdit_oficial 2 года назад

Obrigado

@MatheusBattisti 2 года назад

de nada!

@TomMeyjor 5 месяцев назад

Matheus muito top a sua aula me ajudou muito, você pode me dizer como eu faço pra centralizar essas 2 divs no centro da pagina? Muito obrigado.

@eduardooliveira5257 2 года назад

Disso eu já sabia, na verdade eu queria saber se tem como colocar imagens de tamanhos(altura no geral) diferentes uma em baixo da outra preenchendo aquele espaço na vertical que o display: inline-block; deixa, pode me dizer se tem como? já sou bem avançado no css e nunca descobrir.

@danielbeenny 3 года назад

como colocar espaçamento entre essas duas "imagens" vermelha e azul? Ex: quero elas alinhadas no centro do site, porem com um espaçamento maior que o inline-block dá.

@heiderdideriksen9223 2 года назад

Prof. Battisti, consegue fazer um vídeo explicando o Swap Images, utilizando 4 imagens, 2 fixas e 2 hover. Sem usar JS, claro! Ninguém fez um vídeo destes.

@TheCleber000 3 года назад

Parabéns e muito obrigado, ajudou demais!!!

@MatheusBattisti 3 года назад

valeuuu Cleberton, tamo junto!

@heiderdideriksen9223 2 года назад

Prof. este seletor DIV afeta todas as DIVs da página. Mostre como fazer para definir só as DIVs dos elementos (quadrados coloridos)?

@thefriboy343 2 года назад

Coloca um "ID" na div com alguma identificação, para poder fazer isso

@mbs2488 3 года назад

Gostaria de saber como deixar uma div á left e outra a right, na mesma linha ?

@GilbertoLopesdeRezende 2 дня назад

como faz pra chamar o link do css como vc chamou "link:css'' e completou sozinho????

@marianaoliveira2013 2 года назад

queria saber como coloca borda nesses quadrados, como escreve dentro, posicionar a escrita dentro perto da barra superior, e como colocar um quadrado em cada canto da página

@helviosouzaprofessor_historia 2 года назад

Boa tarde! Posicionei um texto ao lado do outro, mas, o segundo texto ficou alinhado com a parte debaixo do primeiro. Como jogo ele pra cima?

@micaelysilva1847 2 года назад

como eu posso colocar uma imagem e o menu bem juntinhos

@TheDavifernando 4 года назад

Tem que tomar um sol hein Matheus... Kkkkkk! Showww!

@MatheusBattisti 4 года назад

mal de programador kkkk

@raphael1728 Год назад

Legal.... E como faz para fixar uma div e deixar a outra deslizante?

@amarovr 3 года назад

Como eu centralizo essa 2 DIVs no centro da pagina? (mantendo as 2 lado a lado)?

@cleberterodrigues8097 Год назад

Não sei se ainda responde, mas estou com uma dúvida. Se essas div's estiverem dentro de uma section, o comportamento será o mesmo?

@HumoRado222 Год назад

E se eu tenho 3divs, ambas com tamanhos diferentes, como eu faria para alinhar uma do lado da outra

@ericberlim 2 года назад

Muito obrigado, Matheus! Como fazer com 4 blocos?

@MatheusBattisti 2 года назад

As divs precisam ficar inline-block com largura de 25% ou utilizar o flexbox... Tem um vídeo sobre aqui no canal, veja: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-P9TrFDNwor4.html

@canalrps 2 года назад

fala mano,poderia me ajudar? eu estou tentando colocar videos um do lado do outro,no entando não estou conseguindo dessa forma :/

@a_9867 Год назад

aside tbm funciona?

@anapaulaoliram 7 месяцев назад

👏🏼👏🏼👏🏼👏🏼

@lt.darwin2163 3 года назад

tá mas, e se já tem o inline-block e msm assim não fica uma do lado da outra?

@JoaoAntonio-rf6sr 2 года назад

comigo por algum motivo não funciona, ja tentei inline-block e float.

@pedrocunhajunior 3 года назад

Boa noite 🌙 Qual ferramenta é essa que vc tá usando ? Net beans

@MatheusBattisti 3 года назад

Opa Pedro, boa noite, é o visual Studio code

@pedrocunhajunior 3 года назад

@@MatheusBattisti blz valeu

@rodrigozotto 3 года назад

Comeca em 3:00

@federalmayhem304 3 года назад

Comentario bonito :D

@sapodorocklio923 3 года назад

Começa em 2:45 pra quem tem pressa

@thiagomenezes8975 2 года назад

Matheus, é possivel ser seu afiliado e vender seus cursos ? tenho um canal no youtube com 20k e um site com 100k de acessos mensais, grato

@wellingtonrocha8839 2 года назад

direito e simples.

@MatheusBattisti 2 года назад

valeu!

@toutch2050 2 года назад

seu audio ta com mt eco pra melhorar fica em um espaço menor tipo um quarto

@MatheusBattisti 2 года назад

opa Lucas, realmente tinha este problema antes, agora já está ajustando =)

@toutch2050 2 года назад

@@MatheusBattisti ok

@nathanielfilipeone 3 года назад

Como posicionar as duas divs no centro da tela ?

@vitrolagm2090 3 года назад

Cara vc tá fazendo muita rápido eu nem intendi como vc fez ali

@stomperhk9107 3 года назад

Demora um século para começar o vídeo.

@na_panfletos_e_cartoes 3 года назад

Procure sobre o efeito , serotonina mais recompensação, vc vai ver que quem faz isso ajuda e muito ,A galera de hoje em dia quer tudo imediato , e isso vai chegar uma hora que não vão aguentar ver um vídeo de 1 minuto e já está desesperada .

@stomperhk9107 3 года назад

@@na_panfletos_e_cartoes Cara, você não está falando coisa com coisa. O cara enrolou mais de minutos pra começar o vídeo, ninguém suporta isso. Muita gente aqui não quer ouvir propaganda, só quer assistir a aula.