Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá!
Eu estou tentando fazer um layout de postagem em que o primeiro ocupa a largura de 100%. Os demais são dispostos em grid, dois posts.
(Vou anexar uma imagem para exemplificar o que desejo).
Segue o código:
.post:first-child{width:100%;position:relative;}
.post{margin-bottom:60px;width:48.8%;float:left;background:#eee}
.post:nth-child(2n+2){margin-right:30px;}
<div id='mainwrapper'>
<div class="post">
<div class="post-entry">
1 Post com width 100%. Here goes my post.
</div>
</div>
<div class="post">
<div class="post-entry">
2. Post com width 48%. Here goes my post.
</div>
</div>
<div class="post">
<div class="post-entry">
3. Post com width 48%. Here goes my post.
</div>
</div>
</div><!-- mainwrapper-->
Esse código que fiz não me satisfez por completo porque o post da direita não "gruda" no canto, então está ficando desigual o primeiro e os demais.
Eu gostaria de saber se não existe uma forma mais prática de fazer esse código.
Obrigada!
Olá, muito obrigada.
Eu acabei conseguindo, mas de outra maneira.
Vou deixar aqui o código:
#mainwrapper{width:900px;margin: 0 auto;background:violet;height:100px;}
.post:first-child{width:100%;}
.post{background:#eee;width: calc(50% - 15px);float:left;}
.post:nth-child(even){margin-right:30px;}
<div id='mainwrapper'>
<div class="post">
<div class="post-entry">
1 Post com width 100%. Here goes my post.
</div>
</div>
<div class="post">
<div class="post-entry">
2. Post com width 50%. Here goes my post.
</div>
</div>
<div class="post">
<div class="post-entry">
3. Post com width 50%. Here goes my post.
</div>
</div>
<div class="post">
<div class="post-entry">
4. Post com width 50%. Here goes my post.
</div>
</div>
<div class="post">
<div class="post-entry">
5. Post com width 50%. Here goes my post.
</div>
</div>
</div><!-- mainwrapper-->
Obrigada e abraços!
Não seu o que você quis dizer com isso:
>
Em 02/11/2019 at 12:16, Sherlock02 disse:
o post da direita não "gruda" no canto
Porém olhando a imagem e o código CSS apresentado, deduzo é que o post da direita não fica na direita e sim empilha.
O fato disso acontecer é pela alta de espaço no documento para alinhar cada um.
Pelo fato de ter definido seu width:48.8% e uma margem de 30 pixels hora que isso ultrapassou os 100% da extensão do documento.
Bom para deixar conforme a imagem:
.post:first-child{width:100%;position:relative}
/* Isso se torna desnecessário
.post:nth-child(2n+2){margin-right:30px;}
*/