Distribute li list in 3 columns

Question

Distribute li list in 3 columns

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

I'm trying to create a list with 5 blocks, 4 230X140px and 1 of 250X280px, but they are not aligned side-by-side correctly, they look like this:

Iwouldlikeittolooklikethis:

codes:

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;
}

css lista

asked by anonymous 04.12.2014 / 18:48

2 answers

How to use the JSON response? Is there a function to reindex a multidimensional array?

score 3 · Answer 1

One way is to apply float: left to all <li> and put the <ul> tag within a defined <div> . It would look like this:

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;
}

score 1 · Answer 2

Apparently, just remove :nth-child(odd) from the last selector and wrap the list in a DIV whose width adds up to the dimensions of all boxes (plus borders and box-model paddings):

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>