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對齊問題

回答

相關問題