如何实现 2 列等高的布局，第一列有 1 个元素，第二列有 2 个元素，没有浮动？答案

【问题标题】：How to achieve layout with 2 columns of equal height with 1 element in first column, 2 in second, without floats?如何实现 2 列等高的布局，第一列有 1 个元素，第二列有 2 个元素，没有浮动？
【发布时间】：2013-02-01 13:48:27
【问题描述】：

我正在尝试为在左栏中有徽标、在右侧有旋转图像横幅和顶级导航的网站制作标题，而不使用浮动。我在这里做错了什么？

这是我想要的样子：

这是我的 HTML：

<!doctype html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
    <div id="logo"><p>Logo</p></div>
    <div id="right">    
        <div id="rotator"><p>Rotator</p></div>
        <div id="navigation"><p>Navigation</p></div>
    </div>
</div>
</body>
</html>

这是我的 CSS：

#header{
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    background-color: yellow;
    top: 10px;
    font-size: 0px;
}
#logo{
    display: inline-block;
    background-color: red;
    width: 306px;
    height: 192px;
    font-size: 0px;
}
#right{
    display: inline-block;
    background-color: black;
    width: 718px;
    height: 192px;
    font-size: 0px;
}
#rotator{
    display: block;
    background-color: green;
    width: 718px;
    height: 132px;
}
#navigation{
    display: block;
    background-color: blue;
    width: 718px;
    height: 60px;
}
p{
    font-size: 24px;
    margin:0;
    padding: 0;
}

这就是它最终的样子：

【问题讨论】：

你为什么不想使用浮点数？
部分作为练习，看看是否可以完成，也因为我不太喜欢花车。在我看来，它们很混乱，并且在您的页面上有一个“没有”高度的元素可能会令人沮丧。通过消除浮动，我可以消除对 clearfix 的需要。

标签： html css layout stylesheet

【解决方案1】：

尝试将vertical-align: top; 放在徽标和右侧 div 上

Here's the fiddle

#logo{
display: inline-block;
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
vertical-align: top;

}

#right{
display: inline-block;
background-color: black;
width: 718px;
height: 192px;
font-size: 0px;
vertical-align: top;

}

【讨论】：

【解决方案2】：

#right {

background-color: black;
font-size: 0;
height: 192px;
position: absolute;
right: 168px;
top: 28px;
width: 718px;
}

【讨论】：

【解决方案3】：

这是使用 display:table 和 table-cell 的一种方法。

http://jsfiddle.net/zR9GZ/

<div class="container">
    <div class="col1">LOGO</div>
    <div class="col2">
        <div class="rotator">ROTATOR</div>
        <div class="navigation">NAVIGATION</div>
    </div>
</div>

.container {
    display: table;
    width: 100%;
    color:# fff;
}

.col1, .col2 {
    display: table-cell;
}

.col1 {
    background: red;
    width: 25%;
}

.col2 {
    width: 75%;
}

.rotator {
    background: green;
}

.navigation {
    background: blue;
}

【讨论】：

然后呢？ inline-block 在 IE7 中具有古怪的支持，但我看到它在这里使用，没有通常的嫌疑人让它工作。不到 2% 的浏览器是 IE7。对于我的工作，我不会将其计入要支持的浏览器列表中。
@user1721135 - 你是对的，但 OP 从未指定对 IE7（或任何特定浏览器）的支持，正如 cimmanon 所说，IE7 现在并没有那么广泛使用。
对 ie7 的支持是给定的，尤其是因为它很容易支持它。只有对 html/css 有一点了解，ofc 才容易。
你在说什么。 1.1% 的人得到了一个损坏的布局或什么。客户可能不会注意到，但肯定是不好的做法。
那么这是不好的做法 :-)

【解决方案4】：

虽然 flexbox 还没有完全准备好用于生产设计，但这是响应式解决方案的样子（尝试调整它的大小！）：

#header {
    display: flex;
    flex-flow: row wrap;
}

#header{
    background-color: yellow;
    font-size: 0px;
}

#logo{
    background-color: red;
    width: 306px;
    height: 192px;
    font-size: 0px;
}
#right{
    background-color: black;
    font-size: 0px;
    flex: 1 1 auto;
    display: flex;
    flex-flow: column nowrap;
    min-width: 40%;
}
#rotator{
    background-color: green;
    flex: 2 1 auto;
}
#navigation{
    background-color: blue;
    flex: 1 1 auto;
}

http://jsfiddle.net/2UjC3/（不包括前缀）

在足够多的浏览器支持 flexbox 之前，我的建议是使用 Billy Moat 的 display table/table-cell 解决方案。

【讨论】：