CSS 垂直对齐和内联块问题-解网

问：

我正在尝试创建一个 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>

CSS的

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');

我不想使用浮点数的主要原因是学术。我试图理解为什么内联块在这种情况下不起作用。我尝试了您删除 66% 并更改宽度的建议。这没有用。删除 66% 只会导致中间 div 消失，而第一个和最后一个保持不变。更改 div 的宽度也无济于事。

0赞 Misunderstood 1/8/2015

这是令人钦佩的，我尊重这一点。顺便说一句，您可以删除 display：inline-block，渲染不会改变。

0赞 TheFrozenOne 1/8/2015 #2

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

0赞 Misunderstood 1/8/2015 #3

我认为您没有正确解释问题。这些列不是彼此重叠，而是并排排列。col2 中的文本从 col1 文本结束的地方开始。col 3 也是如此。

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

col2 边距无法推送 col1 中的文本，因此它必须位于文本下方才能到达左侧。col3 也是如此，但它也不能通过 col2 文本。如果您从 col2 中删除了文本，col3 的顶部将开始在 col1 文本下对齐。

在 FireFox 或 Chrome 中亲自查看。

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

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

CSS 垂直对齐和内联块问题

CSS vertical-align and inline-block issue

评论

评论

评论