Question

我有两个div，一个在另一个里面。 “内部”并不像我期望的那样表现。它不是坐在右侧“maindiv”的内侧。有人请解释原因吗？

这是我的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);
}

Answer 1

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

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

View on JSFiddle

有关clearfix技巧的更多详细信息，请查看Chris Coyier's fine summary.

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

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

View on JSFiddle

Clearfixing？这是什么疯狂？

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

在技术术语中，浮动是从normal flow中删除的元素。正常流程仅指行为block或inline框的元素。您可以执行许多操作来从正常流中删除元素。设置position: absolute;就是一个例子。而且，正如我之前所说，浮动是另一个例子。

那么浮动如何表现？嗯，它占用了水平空间而不是垂直空间。

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

Float

图片来源：w3c CSS2 Specs

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

该图像来自规格本身，这就是为什么我认为规范的作者想要浮动用于此目的。

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

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

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

我们将此属性应用于父级的:after伪元素，以便它不会出现在我们的标记中，但仍会在浏览器中呈现。瞧！我们已成功搞定了！

有关clear属性的更多信息，我建议您转到excellent MDN article on the topic。

Answer 2

只需在overflow: auto

上设置div.mainDiv即可

http://jsfiddle.net/77NEF/

我不能让这个<div>元素放在另一个<div>？</div> </div>中

2 个答案:

Clearfixing？这是什么疯狂？