开发者

css alignment question

I'm having trouble with getting unordered lists aligned how I want them to. Here's an image of what I'm looking to achieve. How can I get it to look like the version on the right?

css alignment question

I will have between 1 and 6 unordered lists depending on the page, so I need a generic solution. Here's a stripped down version of the css and html I'm using:

CSS:

    body { margin: 50px auto; width: 500px; }
    ul { 
        float:left;
        margin开发者_高级运维: 0 20px 20px 0;
        padding: 0;
        width: 200px; 
    }
    li { 
        background: #ddd;
        list-style: none;
        margin: 1px 0;
        padding: 5px
    }
    li.title { background: #333; color: #fff; }

HTML:

<ul>
        <li class="title">Title A</li>
        <li>1A</li>
    </ul>
    <ul>
        <li class="title">Title B</li>
        <li>1B</li>
        <li>2B</li>
        <li>3B</li>
    </ul>
    <ul>
        <li class="title">Title C</li>
        <li>1C</li>
        <li>2C</li>
    </ul>


I don't know of a pure CSS technique which can handle this generically.

I've given up and used a jQuery plugin to do this in the past for something similar:

jQuery Masonry

(There's also a raw JavaScript version: Vanilla Masonry)

A picture is worth a thousand words:

css alignment question


float:left the ul you want in left, and float:right the ul you want at right.

Example: http://jsfiddle.net/Xdyhy/


Try putting the two left lists in a div and float that div left. Then float the remaining div right.

You will have to wrap them all in one containing div otherwise the rightmost div will fly off to the edge of the page.


use clear:both in ul

ul { 
        float:left;
        margin: 0 20px 20px 0;
        padding: 0;
        width: 200px; 
        clear:both;
    }

see here

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜