1

我有两个 div，一个在另一个里面。“innerdiv”没有像我预期的那样表现。它不在右侧的“maindiv”内部。有人会解释为什么吗？

JsFiddle：http: //jsfiddle.net/D9RsQ/

这是我的html：

<!DOCTYPE html>
<head>
    <meta charset = "UTF-8"/>
    <title>Home</title>
    <link rel="stylesheet" text="text/css" href="css.css">
</head>
<body>
    <div class = "maindiv">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
            </p>
        <div class = "innerdiv">
            <p>This is innerdiv content</p>

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

这是我的CSS：

html {
    height:100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient(#ffffff, #004c99);
    background: -moz-linear-gradient(#ffffff, #004c99);
    background: -ms-linear-gradient(#ffffff, #004c99);
    background: -o-linear-gradient(#ffffff, #004c99);
    background: linear-gradient(#ffffff, #004c99);
}

p {
    font-family:"Arial Black";
    line-height:120%;
}
div.maindiv {
    width:90%;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
    padding:0px;
    background-color:rgb(220,220,220);
    border-right: solid black 2px;
    border-left: solid black 2px;
}
div.innerdiv {
    width:100px;
    float:right;
    background-color:rgb(100,100,100);
}
4

2 回答 2

5

clearfix您需要对父级使用众多技巧之一。例如：

div.maindiv:after {
  content: "";
  display: table;
  clear: both;
}

在 JSFiddle 上查看

有关 clearfix 技巧的更多详细信息，请查看Chris Coyier 的精彩总结。

如果您希望右框出现在右上角，只需将其放在您的 Html 中主 div 的段落之前：

<div class = "maindiv">
  <div class = "innerdiv">
    <p>This is innerdiv content</p>
  </div>
  <p>Text</p>
</div>

在 JSFiddle 上查看

清除固定？这是什么疯狂？

为了解释这里发生了什么（以及它可能产生的其他影响），让我先解释一下什么是浮点数。

用技术术语来说，浮点数是从正常流中移除的元素。正常流程仅指行为类似于block或inline框的元素。您可以做很多事情来从正常流程中删除一个元素。设置position: absolute;就是一个例子。而且，正如我之前所说，花车是另一个例子。

那么浮点数的行为如何？嗯，它占用水平空间，但不占用垂直空间。

这对于我想象的浮动的预期用途之一是理想的：段落旁边的图像。这允许浮动元素显示如下：

漂浮

图片来源：w3c CSS2 规范

该图像显示了文章中的常见布局，并且仅在浮动元素不向下推动下一段时才有可能。因此，当涉及到页面的垂直格式时，浮动被忽略。

该图像来自规范本身，这就是为什么我认为规范的作者打算将浮点数用于此目的。

因此，通过在布局中使用浮动，我们可能会迫使他们做一些他们不一定要做的事情。但这不必担心，因为 Css 仍然相对较新，我们往往需要做很多事情。更好的格式化系统即将出现（即弹性盒和网格布局）

但是，是的，当涉及到布局时，我们不希望出现上图中的行为。我们希望元素在占据垂直空间的同时拥抱一侧。虽然浮动默认情况下不会这样，但我们可以强制他们这样做。而且，当你这样做时，它被称为clearfixing.

我将解释我上面使用的方法：使用clear属性。此属性允许您限制元素两侧的浮动。clear: both;防止两侧浮动。

我们将此属性应用于:after父元素的伪元素，这样它就不会出现在我们的标记中，但仍会呈现在浏览器中。瞧！我们已成功清除修复！

有关 clear 属性的更多信息，请参阅有关该主题的优秀 MDN 文章。

于 2013-05-30T18:48:22.157 回答
2

刚overflow: auto开始div.mainDiv

http://jsfiddle.net/77NEF/

于 2013-05-30T18:51:38.787 回答