如何使用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创建彼此相邻的两列文本？

回答

相关问题