如何使用CSS創建彼此相鄰的兩列文本？

我試圖以確定格式化文本的兩列像這樣使用CSS的最佳方式：如何使用CSS創建彼此相鄰的兩列文本？

（帶-----空格）

dfasfasdfsa -------- ---- fdafsadfasdfasdf

fdsafadsfaf ------------ fadsdsafasfsaf

fdfgfgdsdffd ----------- fgdhfjshkjahjkh

fdljkgjklkj ----- ---------- jfkldjskafljaf

我可以蠻力定位它，但我相信肯定有一個更簡單的方法..任何建議？對於初學者問題抱歉。

來源

2012-01-18 Ken

使用兩師標籤和s等他們的財產float

<div style='float:left; width:30%'> 
    Put your content here... 
</div> 

<div style='float:left; width:40%; margin-left:30px'> 
    Put another content here... 
</div>

隨着float屬性，兩個divs將側身對準，則margin-left屬性將得到兩種分之間的餘量。

您可以選擇將CSS放在單獨的文件中，然後使用id或class來引用它。

來源

2012-01-18 23:00:37 Chibuzo

div的意思是「分裂」，啊....從來不知道這一點。感謝您的領導！ – bytecode77 2016-03-17 23:41:55

css3專欄適用於現代瀏覽器，不支持IE8或以下版本。

http://www.quirksmode.org/css/multicolumn.html https://developer.mozilla.org/en/CSS3_Columns

您可以定義列數和列之間的距離：

div {column-count:2; column-gap: 20px;}

另外，jQuery的columnizer插件作品跨瀏覽器：

http://welcome.totheinter.net/columnizer-jquery-plugin/

來源

2012-01-18 22:59:24

如果問題被解釋爲請求將文本運行顯示在兩列中，以便它從第一列的底部繼續到第二列的頂部，則這是可以的（通常關於瀏覽器支持的CSS警告）與兩段不同的文字相對）。 – 2012-01-18 23:24:26

yea ...有點難以用「adlkajsdasdad」來解釋其中一種方式:) – 2012-01-19 15:47:50

我已延長Chibuzo的解決方案，那就是：

CSS：

.col1 { 
    float:left; 
    width:100px; 
    background-color: #E8F6F7; 
} 

.col2 { 
    float:left; 
    width:200px; 
    margin-left:30px; 
    background-color: #f2dede; 
}

HTML：

<div class="col1">       
    <div>Monday:</div> 
    <div>Tuesday:</div> 
    <div>Wednesday:</div>       
</div> 

<div class="col2"> 
    <div>open 8am to 5pm</div> 
    <div>open 9am to 4pm</div> 
    <div>open 9am to 6pm</div>       
</div>

，它看起來像這樣：

我一直在試圖用CSS 的位置,相對和絕對，這是可能的，但可能是相當令人沮喪。

來源

2015-08-12 12:05:15 paulo62

如何使用CSS創建彼此相鄰的兩列文本？

回答

相關問題