通過CSS爲div的內容自動創建兩列布局

在我的網站中，用戶通過所見即所得的編輯器輸入內容。用戶可以輸入列表（ul，li）或幾個段落<p>。通過CSS爲div的內容自動創建兩列布局

我的問題是，我想顯示任何用戶輸入一個兩列的格式。

<ul> 

    <li> 
    Nisi turpis consectetur orci lacinia quam a scelerisque hac ultricies a ullamcorper massa a habitant tempor etiam non.Fermentum vel vestibulum nunc dapibus elit torquent viverra euismod vel.</li> 

    <li>Scelerisque hac ultricies a ullamcorper massa a habitant tempor etiam non.Fermentum vel vestibulum nunc dapibus elit torquent viverra euismod vel.</li> 

    <li>Ullamcorper massa a habitant tempor etiam non.Fermentum vel vestibulum nunc dapibus elit torquent viverra euismod vel.</li> 

    </ul>

是否有可能以顯示它在兩列格式 - ：

例如，如果這是在進入哪些用戶？像這樣的： -

來源

2015-11-04 Steve

一切皆有可能...但你有沒有給我們足夠的繼續確定需要什麼。你能告訴我們你寫的相關代碼嗎？你試圖做什麼？你有最終結果（不只是截圖）的HTML例子嗎？這與你已有的有何不同？ –

使用CSS多列有可能使自動雙欄佈局是

.multiple{ 
 
    -moz-column-count: 2 ; 
 
-webkit-column-count: 2 ; 
 
column-count: 2 ; 
 
-moz-column-gap: 39px ; 
 
-webkit-column-gap: 39px ; 
 
column-gap: 39px ; 
 
-moz-column-rule: 0px dotted #FF0000 ; 
 
-webkit-column-rule: 0px dotted #FF0000 ; 
 
column-rule: 0px dotted #FF0000 ; text-align:justify; 
 
    }

<div class="multiple"> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus posuere justo ut rutrum. Vestibulum arcu metus, bibendum eu tortor at, adipiscing posuere nibh. Fusce sit amet nulla et libero pulvinar auctor. Donec sed euismod justo, ut </p> 
 
<h2>consectetur adipiscing elit.</h2> 
 
<ul> 
 

 
    <li> 
 
    Nisi turpis consectetur orci lacinia quam a scelerisque hac ultricies a ullamcorper massa a habitant tempor etiam non.Fermentum vel vestibulum nunc dapibus elit torquent viverra euismod vel.</li> 
 

 
    <li>Scelerisque hac ultricies a ullamcorper massa a habitant tempor etiam non.Fermentum vel vestibulum nunc dapibus elit torquent viverra euismod vel.</li> 
 

 
    <li>Ullamcorper massa a habitant tempor etiam non.Fermentum vel vestibulum nunc dapibus elit torquent viverra euismod vel.</li> 
 

 
    </ul> 
 
    
 
    <h3>consectetur adipiscing elit.</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus posuere justo ut rutrum. Vestibulum arcu metus, bibendum eu tortor at, adipiscing posuere nibh. Fusce sit amet nulla et libero pulvinar auctor. Donec sed euismod justo, ut </p> 
 
</div>

來源

2015-11-04 03:50:15 Ashok

通過CSS爲div的內容自動創建兩列布局

回答

相關問題