如何使用CSS创建彼此相邻的两列文本？

Question

我正在尝试使用CSS确定格式化两列文本的最佳方法：

（以-----为空格）

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

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

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

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

我可以蛮力定位它，但我相信必须有一个更简单的方法......有什么建议吗？对不起初学者的问题。

Answer 1

使用两个分区标记并设置其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来引用它。

Answer 2

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/

Answer 3

我已经扩展了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 位置，相对和绝对这样做，这是可能的，但可能相当令人沮丧。