如何使用 CSS 创建彼此相邻的两列文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8918611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I create two columns of text next to each other using CSS?
提问by Ken
I'm trying to determine the best way to format two columns of text like this using CSS:
我正在尝试确定使用 CSS 格式化两列文本的最佳方法：
(take the ----- as spaces)
（以 ----- 作为空格）
dfasfasdfsa ------------ fdafsadfasdfasdf
dfasfasdfsa ------------ fdafsadfasdfasdf
fdsafadsfaf ------------ fadsdsafasfsaf
fdsafadsfaf ------------ fdsdsafasfsaf
fdfgfgdsdffd ----------- fgdhfjshkjahjkh
fdfgfgdsdffd ----------- fgdhfjshkjahjkh
fdljkgjklkj --------------- jfkldjskafljaf
fdljkgjklkj --------------- jfkldjskafljaf
I could brute force position it, but I'm sure there must be an easier way..any advice? Sorry for the beginner question.
我可以蛮力定位它，但我相信一定有更简单的方法......有什么建议吗？抱歉初学者的问题。
回答by Chibuzo
Use two division tags and set their floatproperty
使用两个分割标签并设置它们的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>
With the floatproperty, the two divswill be aligned sideways, the margin-leftproperty will give a margin between the two division.
有了float属性，两个divs会侧身对齐，margin-left属性会在两个分区之间留出一个边距。
You could optionally put the CSS in a separate file, then use idor classto reference it.
您可以选择将 CSS 放在单独的文件中，然后使用id或class引用它。
回答by HandiworkNYC.com
css3 columns work on modern browsers, no support for IE8 or under.
css3 列适用于现代浏览器，不支持 IE8 或更低版本。
http://www.quirksmode.org/css/multicolumn.htmlhttps://developer.mozilla.org/en/CSS3_Columns
http://www.quirksmode.org/css/multicolumn.htmlhttps://developer.mozilla.org/en/CSS3_Columns
You can define the number of columns and the space between columns:
您可以定义列数和列之间的空间：
div {column-count:2; column-gap: 20px;}
Alternatively, the jQuery columnizer plugin works cross browser:
或者，jQuery columnizer 插件可以跨浏览器工作：
回答by paulo62
I have extended Chibuzo's solution and here it is:
我已经扩展了 Chibuzo 的解决方案，这里是：
CSS:
CSS：
.col1 {
float:left;
width:100px;
background-color: #E8F6F7;
}
.col2 {
float:left;
width:200px;
margin-left:30px;
background-color: #f2dede;
}
HTML:
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>
and it looks like this:
它看起来像这样：
I had been trying to do it with CSS position, relativeand absolute, which is possible but can be rather frustrating.
我一直在尝试使用 CSS position, relative和absolute来做到这一点，这是可能的，但可能相当令人沮丧。
