Reputation: 7087
I have this list in HTML and I would like order it by columns. I tried using floats it gives me this:
EDIT :
Height of these <li>
is undefined, but I would like C below B, E below E and G below F without change the structure and change the order. I don't want to use position absolute. I'm wondering if there are other solutions.
HTML :
<ul>
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<ul>
OUTPUT (using float: left; width: 240px; border-left: 1px solid #EEE
) :
What I want is more like this below, without changing the HTML because I already use this structure to make responsive.
Is it possible ?
Upvotes: 13
Views: 681
Reputation: 106058
You could use column CSS and a margin-bottom on the first LI tag, like this.
ul {
column-count:4;
padding:0;
column-rule: solid lightgray 1px;
}
li {
display:inline-block;
width:100%;
}
li:before {/* demo purpose to set an height to lis */
content:'';
float:left;
padding-top:50%;
}
li:first-of-type {
margin-bottom:50%;
}
You may need a JavaScript prefixer or add vendor-prefix manually.
Upvotes: 25