CSS垂直对齐和内联块问题答案

【问题标题】：CSS vertical-align and inline-block issueCSS垂直对齐和内联块问题
【发布时间】：2015-01-08 08:42:50
【问题描述】：

我正在尝试使用此处描述的技术创建一个 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>

【问题讨论】：

宽度 33% 不适用于所有浏览器。它必须略低于 33%。少多少取决于浏览器如何计算宽度。如果没有边距，通常 32% 会起作用。

标签： css

【解决方案1】：

我认为您没有正确解释问题。柱子不是在彼此顶部，而是并排。 col2 中的文本从 col1 文本结束的位置开始。第 3 列也是如此。

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

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

在 FireFox 或 Chrome 中亲自查看。

将光标放在 col2 中的文本上并右键单击
选择检查元素。
将光标移到开发人员窗口并移到 HTML 行用于 Chrome 的 Elements 选项卡或 FireFox 的 Inspector 选项卡中的 col2 和 col3。
您需要展开更高层的内容。

在浏览器窗口中，您将看到阴影框延伸到窗口的左侧。

【讨论】：

谢谢！我不明白问题是我的利润。你的解释很完美。谢谢。

【解决方案2】：

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

【讨论】：

【解决方案3】：

不知道你为什么不想使用浮点数。 inline-block 不适用于所有浏览器，例如 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');

【讨论】：

我不想使用 float 的主要原因是学术性的。我试图理解为什么 inline-block 在这种情况下不起作用。我尝试了您删除 66% 并更改宽度的建议。这没有用。删除 66% 只会导致中间 div 消失，而第一个和最后一个保持不变。更改 div 的宽度也无济于事。
这令人钦佩，我尊重这一点。顺便说一句，您可以删除 display:inline-block 并且渲染不会改变。