Question

我正在尝试为左侧列中包含徽标的网站创建标题，并在右侧创建旋转图像横幅和顶级导航，而不使用浮动。我在这里做错了什么？

这就是我想要的样子：

enter image description here

这是我的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;
}

这就是它最终看起来像： enter image description here

Answer 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;

}

Answer 2

#right {

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

Answer 3

以下是使用display进行此操作的一种方法：table＆amp;表单元格。

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;
}

Answer 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的显示表/表格单元解决方案。

如何实现2列相等高度的布局，第一列中有1个元素，第二列中有2个元素，没有浮点数？

4 个答案: