2

Estou tentando criar uma lista com 5 blocos, 4 230X140px e 1 de 250X280px ,porém os mesmos não ficam alinhados lado-a-lado de forma correta, estão assim:

inserir a descrição da imagem aqui

Gostaria que ficassem assim:

inserir a descrição da imagem aqui

códigos:

HTML

<ul>
    <li class="tile-high">0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

    ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul li {
    width: 230px;
    height: 140px;
    margin: 0;
    border: 1px solid red;
    background: #999;
    overflow: hidden;
}
ul li.tile-high {
    width: 250px;
    height: 280px;
}
ul li:nth-child(odd) {
    float: left;
}

2 Respostas 2

3

Uma maneira é aplicar o float:left em todos os <li> e colocar a tag <ul> dentro de uma <div> de tamanho definido. Ficaria assim:

HTML:

<div id="main">
<ul>
    <li class="tile-high">0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</div>

CSS:

#main{
    width: 720px;
}
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul li {
    width: 230px;
    height: 140px;
    margin: 0;
    border: 1px solid red;
    background: #999;
    overflow: hidden;
}
ul li.tile-high {
    width: 250px;
    height: 280px;
}
ul li {
    float: left;
}
1

Aparentemente, basta remover o :nth-child(odd)do último seletor e envolver a lista numa DIV cuja largura some as dimensões de todas as caixas (mais bordas e paddings do box-model):

div {
    width: 716px;
}
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul li {
    width: 230px;
    height: 140px;
    margin: 0;
    border: 1px solid red;
    background: #999;
    overflow: hidden;
}
ul li.tile-high {
    width: 250px;
    height: 280px;
}
ul li {
    float: left;
}
<div>
    <ul>
        <li class="tile-high">0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

0

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 .