Question

我无法在页面上正确对齐多个div。

我想要这个：

[-----HEADER-----]
[DIV1][DIV2][DIV3]
[---SUBCONTENT---]

其中div 1，div2和div3放在名为“navigation”的父div中，“navigation”和“subcontent”都放在名为“content”的父div中。

不幸的是，我明白了：

[-----HEADER-----]
[DIV1][DIV2][DIV3][---SUBCONTENT---]

基本上我的问题是，如何在我的3个水平div之下得到另一个div？

到目前为止我的代码：

<html>
<head>
<style type="text/css">
    #header { background-color: #8AB0B0; }
    #div-1 { float: left; }
    #div-2 { float: left; }
    #div-3 { float: left; }
</style>
</head>

<body>

<div id="header">
    <h1>Some line of text</h1>
</div>

<div id="content">

    <div id="navigation">

        <div id="div-1">div 1</div>
        <div id="div-2">div 2</div>
        <div id="div-3">div 3</div>

    </div>

    <div id="subcontent">
        Some text here
    </div>

</div>
</body>
</html>

Answer 1

尝试使用clear:both

＆＃13;

 #header {
     background-color: #8AB0B0;
 }
 #div-1 {
     background:green;
     float: left;
 }
 #div-2 {
      background:red;
     float: left;
 }
 #div-3 {
      background:blue;
     float: left;
 }
#subcontent{
    clear:both;
}

＆＃13;

<div id="header">
     <h1>Some line of text</h1>

</div>
<div id="content">
    <div id="navigation">
        <div id="div-1">div 1</div>
        <div id="div-2">div 2</div>
        <div id="div-3">div 3</div>
    </div>
    <div id="subcontent">Some text here</div>
</div>

＆＃13;

Answer 2

试试这个：我的宽度是每个div的33％ -

＆＃13;

#header { background-color: #8AB0B0; }
#div-1,#div-2,#div-3 { float: left;width:33% }
#subcontent{float: left;width:100%}

＆＃13;

<div id="header">
    <h1>Some line of text</h1>
</div>

<div id="content">

    <div id="navigation">

        <div id="div-1">div 1</div>
        <div id="div-2">div 2</div>
        <div id="div-3">div 3</div>

    </div>

    <div id="subcontent">
        Some text here
    </div>

</div>

＆＃13;

CSS对齐多个div

2 个答案: