1

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

这就是我希望它看起来的样子：

在此处输入图像描述

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

这就是它最终的样子： 在此处输入图像描述

4

4 回答 4

2

尝试穿上vertical-align: top;徽标和右 div

这是小提琴

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

}

于 2013-02-01T13:55:31.487 回答
1 
#right {

background-color: black;
font-size: 0;
height: 192px;
position: absolute;
right: 168px;
top: 28px;
width: 718px;
}
于 2013-02-01T14:24:11.157 回答
0

这是使用 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;
}
于 2013-02-01T14:03:42.600 回答
-1

虽然 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 解决方案。

于 2013-02-01T14:22:40.697 回答