0

Olá, venho adiando essa dúvida e deixando de lado [...] Busco solução simples para deixar blocos de tabelas lado a lado. Nesse exemplo os blocos iniciam na margem de baixo pra cima com alinhamento do bloco que contém 'height' maior. Quero que inicie de cima de pra baixo, e quando houver um bloco com 'height' maior não desvele, sendo alinhado ao lado ou embaixo num espaço de 3px.

<style>
    body{
        background:black;
    }
</style>

<h2>Titulo</h2>
<ul class="galeria">
    <li><div style="position:relative;width:100px; height:100px; background:yellow;"</div></li>
    <li><div style="position:relative;width:100px; height:320px; background:yellow;"</div></li>
    <li><div style="position:relative;width:100px; height:100px; background:yellow;"</div></li>
    <li><div style="position:relative;width:100px; height:100px; background:yellow;"</div></li>
    <li><div style="position:relative;width:100px; height:100px; background:yellow;"</div></li>
</ul>


<style>
.galeria {
    padding-right: 1em;
    text-align: center;
}

.galeria li {
    padding-left: 0.1em;
    padding-right: 0.1em;
    box-sizing: border-box;
    display: inline-block;
    width: 20%;
}
</style>

• Uma dica já serve ;)

1 Resposta 1

1

O elemento <li> da forma que vc formatou com display:inline-block pode receber a propriedade vertical-align, então basta colocar vertical-align:top que ele vai alinhar ao topo e não a base do irmão mais alto. Para manter o espaço entre o elemento de cima e da linha de baixo vc pode usar um padding-top como no código abaixo.

inserir a descrição da imagem aqui

body {
    background: black;
}

.galeria {
    padding-right: 1em;
    text-align: center;
}

.galeria li {
    padding-left: 0.1em;
    padding-right: 0.1em;
    box-sizing: border-box;
    display: inline-block;
    width: 20%;
    vertical-align: top;
padding-top: 10px;
}

2
  • Entendi! Fico envergonhado de minhas perguntas bestas. Obrigado pelo exemplo em resposta, quando os blocos saem da sequência de uma linha passando para outra fica desnivelado. Tentei outras formas usando float e clear mas não consegui. Tem alguma artimanha que possa compartilhar? Quando digo desnivelado digo não próximo um do outro num espaço digamos de 3px.
    – Jonathan
    Commented 27/06/2019 às 14:24
  • @Jonathan tem formas mais simples para tratar isso com display:flex que eh o que eu indico, ou no seu caso basta colocar um padding-top como falei nos itens que forem ficar na segunda linha de baixo depois dos 4 primeiros. Se vc tiver alguma dúvida em como fazer esse exemplo com flex basta abrir outra pergunta pedindo ajuda com isso. Se essa resposta resolveu o problema considere marca-la como aceita nesse ícone ao lados das setinhas da resposta ✔
    – hugocsl
    Commented 27/06/2019 às 14:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .