3格定位，兩個彼此相鄰，一個在他們下面

我發現一個小問題。我需要創建兩個彼此相鄰的div和一個下面的div。我畫了一張圖片，以便我可以更好地解釋它。主DIV是CSS中的#header。3格定位，兩個彼此相鄰，一個在他們下面

explanation of what I want

因此，這裏是html代碼：

<div id="header"> 
    <div id="header-wrap"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
    <hr> <!-- This is that line under #div1 and #div2 --> 
    <div id="div3"></div> 
    </div> 
</div>

，這是我的CSS代碼：

#header { 
    background-image: url("../img/header.jpg"); 
    background-position: center center; 
    background-repeat: repeat-y; 
    height: 180px; 
    width: 100%; 
} 
#header-wrap { 
    text-align: center; 
    margin: 0 auto; 
    height: 140px; 
    width: 80%; 
    padding-top: 30px; 
} 
#div1 { 
    background-image: url("../img/logo.png"); 
    background-repeat: no-repeat; 
    height: 80px; 
    margin-bottom: 20px; 
} 
#div2 { 

} 
#header hr { 
    border: 0; 
    height: 1px; 
    background: transparent; 
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:  -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:  -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
} 
#div3 { 

}

我不知道該怎麼加進＃DIV2和＃div3所以它的風格是我想要的。謝謝你的幫助。

來源

2013-04-28 Kyrbi

幾乎相同的答案爲以上，剛剛從我右浮動知道不適用於所有（較老的）瀏覽器。

小提琴http://jsfiddle.net/rbHah/

<style type="text/css"> 

#header { 
    background-image: url("../img/header.jpg"); 
    background-position: center center; 
    background-repeat: repeat-y; 
    height: 180px; 
    width: 100%; 

    background-color:yellow; 

    position:relative; 
} 
#header-wrap { 
    text-align: center; 
    margin: 0 auto; 
    height: 140px; 
    width: 80%; 
    padding-top: 30px; 

    background-color:green; 
} 
#div1 { 
    background-image: url("../img/logo.png"); 
    background-repeat: no-repeat; 
    height: 80px; 
    width:50%; 
    margin-bottom: 20px; 

    float:left; 

    background-color:yellow; 
} 
#div2 { 
    width:50%; 
    height:80px; 
    float:left; 

    background-color:orange; 


} 
#header hr { 
    border: 0; 
    height: 1px; 
    background: transparent; 
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:  -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:  -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
} 
#div3 { 

} 
</style> 


<div id="header"> 
    <div id="header-wrap"> 
    <div id="div1">div1</div> 
    <div id="div2">div2</div> 
    <div style="clear:both;"></div> <!--this div is verry important after floating divs! --> 
    <hr> <!-- This is that line under #div1 and #div2 --> 
    <div id="div3">div3</div> 
    </div> 
</div>

來源

2013-04-28 09:07:53 caramba

有了這個CSS就可以實現它：

#div1 { 
    float: left; 
    background: red; 
    height: 80px; 
    width: 40%; 
    margin-bottom: 20px; 
} 

#div2 { 
    float: right; 
    background: red; 
    height: 80px; 
    width: 40%; 
} 

#div3 { 
    width: 100%; 
    height: 20px; 
    background: red; 
} 

#header hr { 
    clear: both; 
    ... 
}

演示：JsFiddle

來源

2013-04-28 09:04:18 Pigueiras

Fiddle.

#header { 
    background: black; 
    width: 100%; 
} 
#header-wrap { 
    text-align: center; 
    margin: 0 auto; 
    width: 80%; 
    padding: 30px 0; 
} 
#div1, #div2 { 
    float: left; 
    width: 48%; 
    height: 80px; 
    margin-bottom: 20px; 
} 
#div1 { 
    background: red; 
    margin-right: 4%; 
} 
#div2 { 
    background: blue; 
} 
#header hr { 
    border: 0; 
    height: 1px; 
    background-color: grey; 
    clear: both; 
} 
#div3 { 
    background: green; 
    height: 80px; 
}

來源

2013-04-28 09:07:24

使前兩個DIV浮動左，你<hr>

#div1 { 
    background-color:#aa6666; 
    float:left; 
    height: 80px; 
    width:150px; 
    margin-bottom: 20px; 
} 
#div2 { 
    background-color:#aaaa66; 
    float:left; 
    height: 80px; 
    width:150px; 
    margin-bottom: 20px; 
} 
#header hr { 
    border: 0; 
    clear: both; 
    /*...*/ 
}

固定寬度然後清除這兩個

來源

2013-04-28 09:13:10 aifarfa

3格定位，兩個彼此相鄰，一個在他們下面

回答

相關問題