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?

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>

回答1:

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:

回答2:

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

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

回答3:

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.

回答4:

use clear:both in ul

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

see here

来源：https://stackoverflow.com/questions/5015406/css-alignment-question

标签

css

alignment

styling