一個DIV顯示爲兩列

我在修改基於Bootstrap構建的WordPress主題，並希望獲得將出現在一個div的內容分佈在兩個偶數高度的列上。這可以通過Bootstrap框架或CSS輕鬆完成嗎？謝謝。一個DIV顯示爲兩列

2015-03-31 oldo.nicho

你可以做的是使用一些新的CSS3元素。

請注意，這將只在最新的瀏覽器，並在大多數情況下都需要瀏覽器前綴的

div { 
 
    -webkit-column-count: 2;/* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2;/* Firefox */ 
 
    column-count: 2; 
 
}

<div> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex 
 
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
 
    duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 
 
</div>

正如你所看到的，你必須調用瀏覽器的特定電話webkit和moz。關於設置寬度和其他這類信息有很多額外的功能，所以閱讀一些文檔會很有用。

下面是關於幾個環節如何使用並在其支持的

瞭解更多：MDN

瀏覽器支持：Caniuse

來源

2015-03-31 08:54:36 Stewartside

有用的信息@Stewartside！非常感謝：-） – 2015-03-31 08:56:37

這是自舉唯一可用的解決方案：

LIVE DEMO

<div class="row"> 
    <div class="col-md-6 col-xs-6 col-lg-6 lol1">somethink</div> 
    <div class="col-md-6 col-xs-6 col-lg-6 lol2">somethink</div> 
</div>

如果您div的內容是文本，你不能管理兩列中顯示此內容，您必須在此容器內使用其他div's。

來源

2015-03-31 08:37:06

感謝您的答覆。好的，所以沒有辦法讓一個'div'的內容分佈在兩列上？基本上，我希望能夠讓我的客戶通過WordPress更新他們的詳細信息，而且他們輸入的任何內容都會跨越兩個甚至更高的列。你提出的解決方案需要在兩個'div's手動調整內容，直到它們的高度相等，對吧？ – 2015-03-31 08:41:02

沒有任何內容，這將出現在兩列一個文本到另一個無論屏幕分辨率 – 2015-03-31 08:44:29

好吧，歡呼的幫助@Ze – 2015-03-31 08:57:29

一個DIV顯示爲兩列

回答

相關問題