html - 防止向左浮动的 div 换行

Question

我有 4 个设置为向左浮动的 div，但末尾的 div 在较小的屏幕上不断换行，这让我很恼火...我希望它们随屏幕尺寸缩放，以便它们始终保持在无论屏幕大小如何，都在同一行...并且我尽量不使用表格(这非常诱人，因为他们对此非常可靠!!!)

我想知道如何解决这个烦人的问题，使它们无论屏幕尺寸如何都始终保持原位？

我将其作为我的 CSS:

.wrapper{
    margin:0 auto;
    width: 80%;
    display: table-cell;
}
.gridf{
    float:left;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.grid{
    float:left;
    margin-left: 3px;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.gridl{
    float:left;
    margin-left: 3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}

我的 HTML:

<div style="overflow: hidden;">

 <div class="wrapper">

        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>

 </div> 



</div>

请帮忙:D

Answer 1

您的包装器是一个百分比宽度的容器，其中有 4 个固定宽度的 float 子元素。

包装器的宽度取决于视口(viewport)的宽度。如果视口(viewport)变窄到 wrapper 的宽度小于 4 个子元素宽度的总和，那么它们自然不会完全适合，因此会进行 wrap。

解决方法是确保您的包装器不会小于子项的组合。

因此，将子元素的宽度、边框和边距相加，然后为包装器提供一个等于该值的 min-width 属性。