Geek asks and answers

HTML UL display in vertical direction

I usually use ul to have a list of products like this, just add "float: left" to li and you are almost running:

p1 p2 p3 p4
p5 p6 p7 p8

Now I am in a situation where I want it to be something like this:

p1 p4
p2 p6
p3 p7
p4 p8

Is it possible?

EDIT:

The content in p1 is dynamic and can vary in size (height). So I'm looking for something like an article layout. Etc .: maybe in the first list there is only a place for 3 products and 4 in the next line. Therefore, I cannot use something like two different lists, because the contents and the product may change.

+3
source share
4 answers

CSS3, (.. IE).

+3

:

CSS

<style type="text/css">
ul {
    float:left;
}
.clearlist {
    clear:both;
    margin:0 410px 0 34px;  
 }
</style>

HTML:

<ul>
    <li>p1</li>
    <li>p2</li>
    <li>p3</li>
    <li>p4</li>
</ul>

<ul>
    <li>p5</li>
    <li>p6</li>
    <li>p7</li>
    <li>p8</li>
</ul>

<div class="clearlist"></div>
+1

I would suggest doing so. Nesting columns in an element li.

CSS

ul      { overflow:hidden }
li      { float:left }
li li   { float:none }

HTML:

<ul>
    <li>Column 1
        <ul>
            <li>Lorem</li>
            <li>Ipsum</li>
        </ul>
    </li>
    <li>Column 2
        <ul>
            <li>Dolor</li>
            <li>Sit</li>
            <li>Amet</li>
        </ul>
    </li>
</ul>
<p>This text is not floated because the list has overflow set to 'hidden'.</p>

And if the content is dynamic, just let your script parse it into different lists.

+1
source

You can choose your method from in this article . As you can see, you will inevitably have to compromise.

0
source

More articles:


All Articles