我有 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
最佳答案
您的包装器是一个百分比宽度的容器,其中有 4 个固定宽度的 float 子元素。
包装器的宽度取决于视口(viewport)的宽度。如果视口(viewport)变窄到 wrapper 的宽度小于 4 个子元素宽度的总和,那么它们自然不会完全适合,因此会进行 wrap。
解决方法是确保您的包装器不会小于子项的组合。
因此,将子元素的宽度、边框和边距相加,然后为包装器提供一个等于该值的 min-width
属性。
关于html - 防止向左浮动的 div 换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10891293/