CSS定位问题 [英] css alignment question

问题描述

我在使用越来越无序列表对准我多么希望他们的麻烦。下面是什么，我希望获得的图像。我怎样才能得到它看起来像右边的版本？

我将有1至6无序列表根据页面上的，所以我需要一个通用的解决方案。这里的CSS和HTML的，我使用的是精简版：

CSS：

 身体{保证金：50px​​的汽车;宽度：500px的; }
    UL {
        浮动：左;
        保证金：0 20px的20像素0;
        填充：0;
        宽度：200像素;
    }
    李{
        背景：#ddd;
        列表样式：无;
        保证金：1px的0;
        填充：5px的
    }
    li.title {背景：＃333;颜色：#FFF; }
 

HTML：

 ＆LT; UL＆GT;
        ＆LT;李类=头衔 -  GT;标题A＆LT; /李＆GT;
        ＆LT;李＆GT; 1A＆LT; /李＆GT;
    ＆LT; / UL＆GT;
    ＆LT; UL＆GT;
        ＆LT;李类=头衔 -  GT;标题B＆LT; /李＆GT;
        ＆LT;李＆GT; 1B＆LT; /李＆GT;
        ＆LT;李＆GT; 2B＆LT; /李＆GT;
        ＆LT;李＆GT; 3B＆LT; /李＆GT;
    ＆LT; / UL＆GT;
    ＆LT; UL＆GT;
        ＆LT;李类=头衔 -  GT;标题℃下/李＆GT;
        ＆LT;李＆GT; 1C＆LT; /李＆GT;
        ＆LT;李＆GT; 2C＆LT; /李＆GT;
    ＆LT; / UL＆GT;
 

解决方案

我不知道一个纯CSS技术，它可以处理这个一般

我已经放弃了，并使用了jQuery插件做到这一点，在过去类似的东西：

jQuery的砌体

（还有一个原始的JavaScript版本：香草砌体）

一张图片胜过千言万语：

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>

解决方案

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定位问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！