CSS的2列自動布局？

Question

給出一個

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing...
</div>

是否可以使用CSS自動生成2列或3列布局，例如通過指定容器的高度？ 如果沒有，在這種情況下最佳做法是什么？

謝謝你的幫助。

Answer 1

鑒於對我之前的回答的評論，似乎我可能誤解了你在尋找什么。

如果您希望文本自動從一列流到另一列，那么您的選項是：

• CSS 3多列 （支持不足）
• JavaScript（有趣的回流問題）

就個人而言，我會避免它。 通常，從一列流到下一列的內容對屏幕媒體不友好。

Answer 2

你可以隨時采用jQuery方法，看看這篇文章： http ： //www.mainelydesign.com/blog/view/auto-columns-columnizer-my-new-favorite-jquery-plugin

Answer 3

你肯定無法將上面的內容轉換為2或3列布局，但是如果你有一個容器和3個div，創建3列布局就像這樣簡單：

<div class="container">

  <div class="col1">Column1</div>
  <div class="col2">Column2</div>
  <div class="col3">Column3</div>

</div>

而CSS：

.container{overflow:hidden; padding:20px; border:1px solid #ccc;}
.col1, .col2, .col3{width:200px;float:left;clear:none;margin:0 10px 0 10px;}

這將創建一個非常基本的3列布局，每列每邊都有10px的邊距。 容器div有20px填充和一個微妙的邊框。

希望這能指出你正確的方向。

Answer 4

對於這種類型的東西，我會看一下使用網格系統，如960或YUI

兩者都包括將子部分划分為列的方法。

Answer 5

Floatutorial網站有很好的最佳實踐范例。