CSS 垂直对齐和行内块问题

Question

我正在尝试创建一个 3 列布局，其中所有 3 列都具有相同的高度（高度事先未知，因此我无法指定高度的硬编码值）使用此处描述的技术：

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>

Answer 1

不确定您为什么不想使用浮动。内联块不适用于所有浏览器，例如 IE8。

您可以使用类似的东西：

.col{margin:0 0 .3em .3em ;-webkit-column-count: 3;-moz-column-count: 3;-ms-column-count: 3;-o-column-count: 3;column-count: 3;}

如果每一栏的内容都是动态的。您可以在 onload 事件后使用 javaScript 来平衡每列的长度。

var max = 0;
var len = document.getElementById('col1').offsetHeight;
if (len > max)(max = len;}
len = document.getElementById('col2').offsetHeight;
if (len > max)(max = len;}
len = document.getElementById('col3').offsetHeight;
if (len > max)(max = len;}
document.getElementById('col1').style.height= (max+ 'px');
document.getElementById('col2').style.height= (max+ 'px');
document.getElementById('col3').style.height= (max+ 'px');

Answer 2

我建议使用 width: 33.33%，而大多数浏览器会忽略以下数字。还知道 display: inline-block; 会在元素之间添加 white-space。有几种方法可以解决此问题：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

我认为您没有正确解释问题。这些列不是一个接一个，而是并排放置。 col2 中的文本从 col1 文本结束的地方开始。第 3 列也一样。

它不起作用的原因是 col2 和 col3 边距延伸到页面的左侧。

col2 边距不能穿过 col1 中的文本，因此它必须在文本下方才能到达左侧。与 col3 相同，但另外它也不能通过 col2 文本。如果您从 col2 中删除文本，col3 的顶部将开始在 col1 文本下方对齐。

在 FireFox 或 Chrome 中亲自查看。

将光标放在 col2 中的文本上并单击鼠标右键
选择检查元素。
将光标移至开发人员 window 并移至 HTML 行 Chrome 中的元素选项卡或 FireFox 中的检查器选项卡中的 col2 和 col3。
您需要展开高层内容

在浏览器 window 中，您会看到阴影框延伸到 window 的左侧。

CSS 垂直对齐和行内块问题

CSS vertical-align and inline-block issue

css