Question

<style>

div#float {
    text-align: center;
    float: left;
    width: 150px;
    height: 150px;
    border: 1px solid blue;
    background: gold;
}
div.content {
    background: yellow;
    border: 1px solid  purple;
    height: 150px;
}

</style>

            <div id='float'>
                Float text. 
            </div>
            <div class='content'>
                Content text. 
            </div>
            <div class='content'>
                Content text. 
            </div>

任何人都可以解释第二个div内容是如何在换行符上的吗？而第一个div与div＃float内联？

Answer 1

默认情况下，div占用块的整个宽度。你的第一个只是在浮动的div之后开始，因为它就是它可以开始的地方。由于您的内容div都是块级元素，因此它们将占用它们可用的整个宽度。

有很多方法可以控制这个，但我不确定你在追求什么。

Answer 2

第二个div显示为块元素。块元素的宽度为100％，因此第一个div没有空间出现在第二个div的左侧大小上。

Answer 3

尝试将“display”css属性切换为“inline-style”

Answer 4

第一个<div class='content'>高150像素，与#float一个相同，所以它只向下推了一行。如果您希望#float“跨越”两条线，请给它更多高度，例如：

div#float {
    text-align: center;
    float: left;
    width: 150px;
    height: 300px;
    border: 1px solid blue;
    background: gold;
}

You can try it out here

Answer 5

上面的答案清楚地表明，这不是特定于div的问题。这是关于html页面中的“流程”。

DIV的默认渲染为块元素，它给出了最大宽度。当你浮动这样一个元素时，它会失去这种效果。但是块元素不会自动清除浮动。因此，第一个contentdiv获取浮动旁边的所有可用空间。另一个contentdiv从换行符开始。

Answer 6

它的行为完全符合它的要求。标记中的第一个div是浮动的，因此从流程中取出。它将在左上角占据150x150的位置，并且在标记之后的任何内容将尝试挤压浮动div右侧的左侧空间，这是第一个内容div所做的。 div是块级元素，因此它们将占用可用空间的整个宽度。与内联元素不同，它们不会缩小以适合呈现的文本。

第一个内容div将延伸到窗口的最右边。如果你想知道为什么第一个div（float div）的行为不像块级元素，那是因为它是浮动的，这会导致它缩小以适应它的内容（在你的情况下你给它一个明确的宽度为150px ）。

一旦浏览器渲染了浮点div和内容div，它就会耗尽剩余的空间，因此它会转到下一行，并从该行的第一个内容div开始。

您似乎正在尝试设置导航栏，后跟内容。如果将内容包装在div中并将div浮动到左侧，则将保留在黄金div的右侧，但当浏览器调整大小太小而无法容纳它们时，会发生列丢弃。因此，您需要一个父div，其宽度为float和content div。我在你的标记中添加了一个800像素的外包装div。

.....

div#contentwrapper {
  float: left;
  width: 550px;
}

#outerwrapper {
  width: 800px;
}

</style>
</head>

<body>

<div id="outerwrapper">
<div id='float'>
    Float text.
</div>

<div id="contentwrapper">
<div class='content'>
    Content text.
</div>
<div class='content'>
    Content text.   
</div>
</div>

</div>
.....

您可能还想为div使用与css保留字“float”不同的名称。有关更多CSS float tutorials。

试图理解<div>元素</div>

6 个答案: