当浏览器调整大小时，如何防止浮动的div元素包裹？ [英] How can I prevent floated div elements from wrapping when the browser is re-sized?

问题描述

当浏览器调整大小以使视口变小时，如何使DIV的浮动左边彼此不相邻？

How do you make DIV's that are floated left next to each other not wrap when the browser is re-sized such that the viewport becomes smaller?

div {
  float: left;
}

例如当浏览器完全最大化时， div 这样排列：

For example when the browser is fully maximized the divs line up like this:

|div| |div| |div| |div| |div| |div| |div| |div|

但是当浏览器缩小时，会发生以下情况：

But when the browser re-sized smaller this happens:

|div| |div| |div| |div| |div|
|div| |div| |div|

如何使 div

推荐答案

将其包装到另一个div中，该div的宽度（或最小宽度） ）指定。

Wrap them in another div, which has a width (or min-width) specified.

<div class="parentContainer">
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
</div>

.parentContainer {
    /* The width of the parent needs to be equal to the total width of the children.
    Be sure to include margins/padding/borders in the total. */
    width: 600px;
    overflow: auto;
}

这也有助于在包含div上指定overflow：auto其高度匹配的子浮点。

It also helps to have overflow: auto specified on the containing div, to allow its height to match the child floats.

这篇关于当浏览器调整大小时，如何防止浮动的div元素包裹？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！