为什么两个浮动div之一被推到下一行？ [英] why is one of two floated divs are pushed to the next line?

问题描述

我要在一行中放置两个div，第一个div具有固定的宽度，第二个没有设置宽度。如果我尝试将两者都设置为float：left，则第二个div如果包含太多单词，则转到下一行。但是，如果第二个是非浮动的，则它与第一个div保持一致。为什么？

I have two divs which I want to place in one line, the first one with a fixed width and the second without a set width. If I try to set both to float:left, the second div would go to the the next line if it contains too many words. But if the second one is a non-floated one, it stays in the same line with the first div. Why?

.left {
    float: left;
    width: 250px;
    height: 300px;
    background-color: red;
}

.right {
    /*if set to float:left, it might goes the next line*/
    /*float: left;*/ 
    height: 300px;
    background-color: blue;
}

<div class="left">sidebar</div>
<div class="right">I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. </div>

推荐答案

如果第二个div不浮动，则蓝色div将保持全角，只有文本会浮动在红色的div周围。减小蓝色div的高度以更好地了解正在发生的情况：

If the second div is non floated the blue div will remain full width and only the text will float around the red one. Reduce the height of the blue div to better understand what is happening:

.left {
    float: left;
    width: 250px;
    height: 200px;
    background-color: red;
}

.right {
    /*if set to float:left, it might goes the next line*/
    /*float: left;*/ 
    height: 300px;
    background-color: blue;
}

<div class="left">sidebar</div>
<div class="right">I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. </div>

float CSS属性放置其容器左侧或右侧的元素，从而允许文本和内联元素环绕。 该元素已从页面的常规流程中移除，但仍保留在该流程的一部分中 ^ref

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow ^ref

因此，float元素位于蓝色上方div，只有文本会自动换行。如果您进一步降低高度，文本将换行至下一行：

So the float element is above the blue div and only the text will wrap arround. If you decrease the height more the text will wrap to next line:

.left {
    float: left;
    width: 250px;
    height: 30px;
    background-color: red;
}

.right {
    /*if set to float:left, it might goes the next line*/
    /*float: left;*/ 
    height: 300px;
    background-color: blue;
}

<div class="left">sidebar</div>
<div class="right">I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. </div>

现在同时包含两个元素浮动，第一个具有固定宽度，但是第二个将使用缩小以适合算法计算宽度：

Now if both element are floated, the first one is having fixed width but the second one will have its width calcuated using the shrink-to-fit algorithm:

如果将宽度计算为自动，则使用的值为收缩至适合。

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

缩小至适合宽度的计算类似于使用自动表格布局算法来计算表格单元格的宽度。大致来说：通过格式化内容而不会出现断行的方式来首选宽度，而不是在出现明显的换行符的地方进行计算，并例如通过尝试所有可能的换行符来计算首选的最小宽度。 CSS 2.1没有定义确切的算法。第三，找到可用宽度：在这种情况下，这是包含块的宽度减去已使用的'margin-left'，'border-left-width'，'padding-left'值，'padding-right'，'border-right-width'，'margin-right'以及任何相关滚动条的宽度。

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.

然后缩小以适应宽度为： min（max（首选最小宽度，可用宽度），首选宽度）。 ^参考

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width). ^ref

在您的情况下，可用宽度是容器的宽度，而首选宽度是容器的宽度元素，没有任何换行符，我们取两者之间的最小值。如果我们有很多文本，则从逻辑上讲将是可用宽度

In your case the available width is the width of the container and the preferred width is the width of the element without any line break and we take the min between. If we have a lot of text it will logically be the available width

.left {
    float: left;
    width: 250px;
    height: 200px;
    background-color: red;
}

.right {
    float: left;
    height: 300px;
    background-color: blue;
}

<div class="left">sidebar</div>
<div class="right">I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. </div>

如果减少内容，则将减少首选宽度，因为它将是最小值

If you reduce the content you will reduce the preferred width and it will be picked since it will be the min value

.left {
    float: left;
    width: 250px;
    height: 200px;
    background-color: red;
}

.right {
    float: left;
    height: 300px;
    background-color: blue;
}

<div class="left">sidebar</div>
<div class="right">I am contents. I am contents. </div>

避免任何随机行为只需固定两个元素的宽度即可。

To avoid any random behavior simply fix the width of both elements:

.left {
    float: left;
    width: 250px;
    height: 200px;
    background-color: red;
}

.right {
    float: left;
    height: 300px;
    width:calc(100% - 250px);
    background-color: blue;
}

<div class="left">sidebar</div>
<div class="right">I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents.  </div>

这篇关于为什么两个浮动div之一被推到下一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！