Question

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

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

我正在改变这种方法，因为我想使用＆＃34; display：inline-block＆＃34;而不是＆＃34; float：left＆＃34;。我正在使用的代码如下。

我遇到的问题是内联块似乎没有正常工作，因为它将我的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

不确定为什么你不想使用float。 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');

Answer 2

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

Answer 3

我认为您没有正确解释问题。这些列彼此不在一起，它们是并排的。 col2中的文本从col1文本结束的位置开始。第3栏也是如此。

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

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

在FireFox或Chrome中查看自己。

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

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

CSS vertical-align和inline-block问题

3 个答案: