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 を使用して行う 1 つの方法です。

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

Though flexbox isn't quite ready for production designs, here's what a responsive solution would look like (try resizing it!):

#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/ (prefixes not included)

Until enough browsers support flexbox, my recommendation is to use the display table/table-cell solution by Billy Moat.

于 2013-02-01T14:22:40.697 に答える