我正在尝试使用此处描述的技术创建一个3列布局，其中所有3列都具有相同的高度（事先不知道高度，因此我无法为height指定硬编码值）：
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
我在某种程度上改变了方法，因为我想使用“ display：inline-block”而不是“ float：left”。我正在使用的代码如下。
我遇到的问题是，内联块似乎无法正常工作，因为它会将我的3个div中的每一个放置在另一个下方，而不是并排放置。谁能向我解释为什么这行不通？
这是我的CSS：
#col1 {
width:33.33333333%;
vertical-align: top;
margin-left: 66.66666667%;
display: inline-block;
}
#col2 {
width:33.33333333%;
vertical-align: top;
margin-left: 100%;
display: inline-block;
}
#col3 {
width:33.33333333%;
vertical-align: top;
margin-left: 133.33333333%;
display: inline-block;
}
#container3 {
width: 100%;
margin-left: 0%;
background-color: green;
overflow:hidden;
}
#container2 {
width: 100%;
margin-left: -33.33333333%;
background-color: yellow;
}
#container1 {
width: 100%;
margin-left: -33.33333333%;
background-color: red;
}
这是我的实际HTML：
<!doctype html>
<html>
<head>
<title>My Sample Columns</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">
one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one
</div>
<div id="col2">
two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two
</div>
<div id="col3">
three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我认为您没有正确解释问题。这些列不是彼此顶部，而是并排放置。col2中的文本从col1文本结束处开始。与col 3相同。
它不起作用的原因是col2和col3页边距延伸到页面的左侧。
col2页边距无法推入col1中的文本，因此它必须走到文本下方才能到达左侧。与col3相同，但除此之外，它也无法通过col2文本。如果从col2删除了文本，则col3的顶部将在col1文本下开始对齐。
亲自在FireFox或Chrome中查看。
在浏览器窗口中，您将看到阴影框延伸到窗口的左侧。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句