如何使用HTML + CSS获取以下布局：
| |x| |
| |x| |
所有三列（两列和分隔符）应该触摸，即它们的背景颜色必须接触而没有任何间隙。
创建此类布局时遇到的问题是我希望“分隔符”的宽度以 em （即基于 font-width ）测量，而主要内容列适合包含元素的其余宽度（即约50％）。我希望保留此布局，而不会在字体大小上独立覆盖左侧或右侧内容列的分隔符（即，如果我增加或减少字体宽度，则应保留布局）。
请注意，此布局位于其他容器内，并且可以在页面中重复这些容器。因此，我无法使用任何绝对定位解决方案。
容器也不应使用固定宽度：将其视为具有width: 100%;或width: auto;（或未设置宽度）的容器。
如果可以在缺少左列或右列（即空列）的情况下创建布局，则获得奖励积分。
答案 0 :(得分：5)
一种可能性：
HTML：
<div class="container">
<div> Column A </div>
<div> Column B </div>
</div>
CSS：
.container {
overflow: auto;
}
.container > * {
float: left;
width: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container > :first-child {
border-right: 0.5em solid COLOR;
}
.container > :last-child {
border-left: 0.5em solid COLOR;
}
其中COLOR是分隔符列的背景颜色。
答案 1 :(得分：5)
使用inline-block你可以创建许多不同的非平凡布局。
我做了两个例子，第一个例子，人均等高：http://jsfiddle.net/kizu/nMWcG/
第二个变体，带有物理间隙分隔符：http://jsfiddle.net/kizu/nMWcG/5/
它们有些不同（根据解决问题的inline-block可能会有更多布局），希望其中至少有一个适合您：）
整个想法是在包装器上使用white-space: nowrap，因此如果宽度的总和大于包装器，则列不会丢弃，然后在包含{{1}的包装器上添加填充这将等于所需的差距。
如果您只需要一列，则可以将其中一列清空（不包含width: auto），或者删除它们并在其上添加一个额外的类。嗯，这取决于你希望孤独的列如何表现等。
答案 2 :(得分：5)
你可以始终使用绝对定位，但你需要定位共同的祖先（relative）。使用浮动可以最好地实现灵活的多列布局：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Test Case: 2-Column Layout with Separator</title>
<style type="text/css">
.container {
position: relative;
float: left;
background-color: green;
}
.container .left {
float: left;
width: 50%;
background-color: red;
}
.container .left .padding {
margin-right: 5em;
}
.container .right {
float: right;
width: 50%;
background-color: fuchsia;
}
.container .right .padding {
margin-left: 5em;
}
.container .separator {
position: absolute;
left: 50%;
top: 0;
width: 10em;
height: 100%;
margin-left: -5em;
background-color: blue;
}
div.clearBoth {
clear: both;
margin: 0;
padding: 0;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
}
</style>
</head>
<body>
<h1>CSS Test Case: 2-Column Layout with Separator</h1>
<div class="container">
<div class="left">
<div class="padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nulla dolor, tempor ac sollicitudin malesuada, tempus in metus. Nulla eget augue ut velit ullamcorper aliquam. Aliquam in nibh eu arcu tincidunt eleifend et ac justo. Donec mauris orci, tristique et ornare quis, dictum a ante. Suspendisse rhoncus commodo ligula, ac mattis eros dignissim vitae. Morbi pulvinar ultrices aliquam. Praesent tempus velit justo, eget fringilla leo. Aliquam fringilla risus eget justo ornare pellentesque. Duis ullamcorper scelerisque mauris vitae blandit. Morbi et bibendum orci. Sed vestibulum posuere nisi, vitae rhoncus mi laoreet in. Quisque commodo porttitor risus, id ullamcorper libero gravida at. Donec interdum accumsan blandit. Vestibulum ac eros et nisl fermentum cursus. Integer vitae ornare orci. Vestibulum facilisis adipiscing metus a suscipit.
</div>
</div>
<div class="right">
<div class="padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nulla dolor, tempor ac sollicitudin malesuada, tempus in metus. Nulla eget augue ut velit ullamcorper aliquam. Aliquam in nibh eu arcu tincidunt eleifend et ac justo. Donec mauris orci, tristique et ornare quis, dictum a ante. Suspendisse rhoncus commodo ligula, ac mattis eros dignissim vitae. Morbi pulvinar ultrices aliquam. Praesent tempus velit justo, eget fringilla leo. Aliquam fringilla risus eget justo ornare pellentesque. Duis ullamcorper scelerisque mauris vitae blandit. Morbi et bibendum orci. Sed vestibulum posuere nisi, vitae rhoncus mi laoreet in. Quisque commodo porttitor risus, id ullamcorper libero gravida at. Donec interdum accumsan blandit. Vestibulum ac eros et nisl fermentum cursus. Integer vitae ornare orci. Vestibulum facilisis adipiscing metus a suscipit.
</div>
</div>
<div class="separator"></div>
</div>
<div class="clearBoth"><!-- clear --></div>
</body>
</html>
请注意
display: none，则此功能正常。因此，如果标记中缺少左列，右列或两者，则它可以正常工作; 由于后者，它也适用于所有支持CSS2的浏览器，因为它不依赖于任何特定于UA的实现。我在以下浏览器中测试了这个积极因素：
说明：
width加水平填充。因此，任何（水平）填充必须由子元素创建。margin-right和margin-left为左侧和右侧列中的子元素（DIV）元素分隔符width的{{1}}。如果不再涉及5em，padding-right和padding-left也可以正常工作。width放在左列和右列之间，必须将容器定位absolute。分隔符具有负边距（relative），以便其框从中间（margin-left: -5em）向左移width: 10em。left: 50%，以便它为分隔符提供堆叠上下文，以显示在列的顶部（并始终具有正确的宽度）。因此，您需要float: left之前和clear: left之后的容器（后者在此处使用零高度clear: both元素）。注意事项：
overflow or overflow-x value与默认值DIV不同，以防止出现这种情况。 更新：现在验证为HTML 4.01 Strict和CSS2;清除visible作为BR的子项，BODY颜色名称不分别。此外，CSS {2>引入了magenta属性。
答案 3 :(得分：3)
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xml:lang="en">
<head> <title>CASH REGISTER</title>
<style type="text/css">
@media all {
body { margin:0 ; padding:0 ; background:#000000 ; color:white }
div { margin:0 ; padding:0 ; font-size:2em }
}
</style >
</head>
<body>
<div style="background-color: #888 ; width: 51em">
<div style="background-color:red;float:left;width:25em">1</div>
<div style="background-color:green;float:left;width:1em">2</div>
<div style="background-color:blue;float:left;width:25em">3</div>
</body>
</html>
答案 4 :(得分：3)
查看http://jsfiddle.net/gjQVW/4/
<div class="container">
<div>left</div>
<div>right</div>
<!--div>3rd</div>
<div>4th</div-->
</div>
使用这些样式
.container {display: table; width: 100%; margin-left: 0; margin-right: 0; margin-top: 3em; background: red}
.container > DIV {border: 1px dashed red; display: table-cell; width: 1%; border-left: 0.5em solid black; border-right: 0.5em solid red; background: yellow}
.container > DIV:first-child {background: pink; border-left: 1px solid lime}
.container > DIV:last-child {background: teal; border-right: 1px solid yellow}
使用display: table和table-cell可让两列保持相同的高度，并确保它们紧挨着另一列。您还可以添加更多列或只留下1.您可能需要调整width: 1%。只有两列50％应该足够了，但是当您添加列时，您必须开始降低列以保持列宽度相同等。您还可以使用padding作为分隔符，但margin和table-cell不相处。
另请注意，IE 8中不支持:last-child css选择器，您需要在列DIV上使用class或id。
编辑：添加另一个小提琴来覆盖需要处于中间的DIV，因为它需要保留一些内容
http://jsfiddle.net/frozenkoi/RfzWb/ HTML：
<div class="mightyContainer">
<div class="container3">
<div>lefty<br><br><br>more lefty</div>
<div class="divider">i</div>
<div>right</div>
<!--div>3rd</div>
<div>4th</div-->
</div>
</div>
CSS：
.mightyContainer {position: relative; background: magenta; margin-top: 3em}
.container3 {display: table; width: 100%; margin-left: 0; margin-right: 0; background: red; -k-position: relative}
.container3 > DIV {border: 1px dashed red; display: table-cell; width: 50%; border-left: 0.5em solid yellow; border-right: 0.5em solid black; background: yellow}
.container3 > DIV:first-child {background: pink; border-left: 1px solid lime}
.container3 > DIV:last-child {background: teal; border-right: 1px solid yellow}
.container3 .divider {text-align: center; width: 1em; background: lime; border: none; opacity: 0.5;
display: block; position: absolute; top: 0px; bottom: 0px; left: 50%; margin-left: -0.5em; /*height: 100%*/;
}
隔板位于中间，具有绝对定位。请注意，带有mightyContainer类的附加DIV是必需的，因为在FireFox中，具有divider类的DIV使用整个页面作为定位的父级而不是conteiner3。如果你将样式从.mightyContainer移动到.container3并删除mightyContainer DIV，RockMelt（webkit）和IE 8/9似乎不需要它（关于FireFox如何在没有额外DIV的情况下看到http://jsfiddle.net/frozenkoi/3zhsv/的示例） ）。
答案 5 :(得分：3)
您可以结合使用:after＆amp; text-indent。对IE8＆amp; IE7 css :after hack起作用您可以在下面使用IE7 http://css-tricks.com/snippets/css/clear-fix/。在这个例子中，如果你想要使用，我没有使用css3的hack。
检查一下：
或
对于现代浏览器，您可以使用box-flex width:50%属性，无需定义{{1}}
检查一下：
答案 6 :(得分：3)
假设我理解你：
简单 流体固定流体 布局： http://www.webdevout.net/test?0v&raw
要查看来源，请点击{{ 3}}
能够删除<div class="left">或<div class="right">或两者，请尝试以下链接： here （ imho，它有丑陋的黑客的感觉，但工作）。
要查看来源，请单击http://www.webdevout.net/test?0w&raw
基本理念是：
<div class="main"> 至于删除right方的能力 - 它适用于原始版本，但要删除left方，需要占位符<div class="fix">，占用空间，因为所有元素都浮动，否则页面会崩溃。
P.S。 fluid-fixed-fluid布局有时被亲切地称为：邪恶的圣杯。
PPS布局可能在IE6上有here（但我不确定.. ie6fix.css 文件在文件夹中，但它不包括在原始测试用例）。
答案 7 :(得分：3)
我不知道你是否期望相同的高度列（如果你想实现它们，有很多地方可以讨论），但这个小提琴http://jsfiddle.net/TNpnh/11/显示了一些变化。如果需要支持IE7及更低版本，这可以避免Sime的box-sizing。基本结构是：
HTML
<div class="container">
<div class="LC"> Left </div>
<div class="RC"> Right<br/>Taller </div>
</div>
CSS
.container {
padding: 0 0 0 1em; /*this creates the extra space */
border: 1px solid red;
overflow: auto;
margin: 10px 0;
}
.container .LC {
width: 50%;
margin: 0 -1em; /* this allows all to fit */
float: left;
background-color: yellow;
border-right: 1em solid blue;
}
.container .RC {
width: 50%;
float: left;
background-color: cyan;
border-left: 1em solid blue; /* this is duplicated so it fills the tallest column */
}
答案 8 :(得分：2)
我真的希望这能帮到你http://jsfiddle.net/EzfAs/
答案 9 :(得分：2)
你去了 - http://jsfiddle.net/wbednarski/w97ax/5/
解决方案也适用于一列。诀窍在.separator类中。