Question

我正在尝试为网页创建一个简单的骨架，而我的divs排队时遇到了麻烦。出于某种原因，我已将嵌套的div在其父div之外出血，即使我将父div的高度设置为auto。

这是我提出的标记：

    <h1><center>Title</center></h1>

    <div class="main">
        <nav>
            <div class="button">
                Link 1
            </div>                  
            <div class="button">
                Link 2
            </div>
            <div class="button">
                Link 3
            </div>
        </nav>
        <br/>
        <br/>

        <div class="mainPic">

        </div>

        <div class="sideText">

        </div>

        <p>
            Main text.
        </p>
    </div>

这是我修改div的CSS：

div.main {
    border: 1px solid black;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    height: auto;
    padding: 20px;
}

nav {
    border: 1px dashed black;
    width: auto;
    height: auto;
}

div.button {
    border: 1px solid black;
    padding: 2px;
    float: left;
    margin-right: 10px;

}

div.mainPic {
    border: double black;
    width: 60%;
    float: left;
    height: 50px;
}

div.sideText {
    border: dotted black;
    width: 30%;
    float: right;
    height: 50px
}

我的问题是： 1）导航就像它里面没有任何东西（虚线），尽管我的按钮类嵌套在其中。 2）我的“mainPic”（双实线）div在我的“main”div之外流动，即使main上的高度设置为auto。右侧内板也是如此（虚线）。 3）我希望我的主文本块出现在两个内框之下，但它们显示在它们之间。

如何解决这些问题？

Answer 1

添加以下

nav, div.main {
  position: relative;
  overflow: hidden;
}

这会导致nav和div.main的浮动内容保留在各自的父母内部。

修改

有人指出，position: relative;在现代浏览器中可能不是必需的。因此，以下内容也应该起作用：

nav, div.main { overflow: hidden; }

这是指向讨论flow root的CSS规范部分的链接。将overflow:hidden设置为“流根”，规范定义special rules for computing the height of an element that is a "flow root"。

Answer 2

添加一个div来清除浮动到你的html文件：

<div class="mainPic"></div>
<div class="sideText"></div>
<div class="clear" />
<p>Main text.</p>

的CSS

.clear { clear: both; }

Answer 3

将overflow:hidden添加到包含浮动子项的任何父元素。这将清除浮动元素，而无需添加额外的DIV。

请注意，要让IE与其他浏览器的行为相同，请添加zoom:1;以使用overflow:hidden。这将为IE6添加 hasLayout 。

Answer 4

尝试在浮动元素之后添加带clear: both的间距元素。

Answer 5

这是因为嵌套的div是float。如果您需要float，请为float: left;添加main div。

Answer 6

1）由于您正在浮动按钮，因此<nav>已折叠。而是尝试按display: inline或display: inline-block。

2,3）Float也是罪魁祸首。清除<p>元素上的浮动：

p {
    clear: left;
}

或者根本不浮动div.mainPic。由于您已经.sideText向右浮动，因此应该足够好了。您必须在html中移动.sideText div.mainPic。

顺便说一下，由于您已经将HTML5与<nav>一起使用，因此使用<aside>代替<div class="sideText">也许是合适的。

尽管使用嵌套div将高度设置为auto，但CSS会流失

6 个答案: