防止左浮动 div 转到新行

我有 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;
}

My 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

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

包装器的宽度取决于视口的宽度。如果视口缩小到包装器的宽度小于 4 个子元素宽度的总和，那么它们自然不会全部适合，因此会包装。

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

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