僅使用CSS和HTML的簡單列布局

這看起來可能比您在單擊此問題時首先想到的要複雜一些。僅使用CSS和HTML的簡單列布局

我期待創建一個真正簡單的2列布局，可以保存文本。問題是，文本正在通過內容管理系統導入，因此可能會更改。這個想法是有一個標籤，當它已經用完了所有的空間時，就可以在另一列上繼承內容。

<p>Content goes here ... for quite a while ... lorum ipsum would be better.</p> 

|-------------| |-------------| 
| Content  | | while ... | 
| goes here | | lorum ipsum | 
| ... for  | | would be | 
| quite a  | | better.  | 
|-------------| |-------------|

因此，這排除了浮動左/右功能，因爲它包含兩個不同的列時，本質上，它需要是一個。只是分裂。

我曾想過使用PHP的strlen函數計算的人物，但大家都知道，在不同的字體，i小於w這意味着實際的字符數將不會在所有的關於內容的高度。不，我不能使用固定寬度的字體。我有一種感覺，這將是最後的手段，但我討厭輕易放棄。

任何建議或意見將是一個很大的幫助。謝謝！

來源

2012-09-19 Oliver Tappin

什麼你所描述通過column-count物業已經在CSS3中實現：

CSS：

p { 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    -o-column-count: 2; 
    column-count: 2; 
}

演示：http://jsfiddle.net/WDgsv/

如果你想也支持IE，使用JS polyfill：http://www.csscripting.com/css-multi-column/

來源

2012-09-19 22:10:29 Blender

在那裏你有我的最愛，先生。 – Nelson

同上。這是天才。我不知道爲什麼這不是在一開始就發明的。 –

對於那些尋找不同的解決方案，（和不幸的解決方案，我由於IE是一個絕對的痛苦使用），我創建了這個代碼整潔位：

<? $array_content = explode("</p>", $page_content); 
$i = 0; 
foreach($array_content as $paragraph) { 
    echo $paragraph; 
    if($i == (round(count($array_content)/2, 0, PHP_ROUND_HALF_DOWN))-1) { 
    echo "</div><div class=\"column\">"; 
    } 
    $i++; 
}?>

的偉大工程的句子太多，只需更換針頭即可：explode(".", $page_content);。

來源

2012-09-21 22:41:16

僅使用CSS和HTML的簡單列布局

回答

相關問題