css对齐问题

我无法获得无序列表如何对齐我希望他们。这是我期望实现的图像。我怎样才能让它看起来像右侧的版本？css对齐问题

enter image description here

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

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>

来源

2011-02-16 Mike Jonas

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

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

jQuery Masonry

（还有一个原始的JavaScript版本：Vanilla Masonry）

一张图片千言万语：

enter image description here

来源

2011-02-16 10:52:18 thirtydot

谢谢，我结束了这个解决方案。还有一些其他的好建议，我没有机会尝试。 – 2011-02-21 23:04:28

尝试把两个左列出一个div和浮空DIV剩下。然后浮动剩余的权利。

你必须将它们全部包装在一个包含div的文件中，否则最右边的div将飞到页面的边缘。

来源

2011-02-16 10:45:52 Olical

float:leftul你想在左边，和float:right你想要的右边。

例子：http://jsfiddle.net/Xdyhy/

来源

2011-02-16 10:47:35 Sotiris

感谢您的建议。我尝试过这个，而且它起初看起来运行良好，但是如果有长长短名单的混合，它会显得有点奇怪。 – 2011-02-21 23:10:02

使用明确：既在ul

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

看到 here

来源

2011-02-16 11:06:26 diEcho

css对齐问题

回答

相关问题