防止浮动左div转到新行

Question

我有4个div设置为向左浮动,但是结束div在一个较小的屏幕上保持包裹两个新线,这真的很烦我...我希望它们随着屏幕尺寸缩放,所以它们总是保持在同一条线上屏幕尺寸...我试图不使用一个表(这是非常诱人的给他们v.reliable为此!!!)

我想知道如何解决这个烦人的问题,所以无论屏幕尺寸如何,它们总能保持在原位？

我有这个作为我的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

嗨,我想你应该检查这个演示

.wrapper {
  margin: 0 auto;
  width: 80%;
  border: solid 1px red;
  overflow: hidden;
}
.gridf,
.grid,
.gridl {
  Background: green;
  width: 24%;
  min-height: 100px;
  float: left;
  margin: 2px 0;
}
.gridf {} .grid {
  margin: 2px 1%;
}
.gridl {
  background: yellow;
}

<div class="wrapper">

  <div class="gridf">One</div>
  <div class="grid">Two</div>
  <div class="grid">Three</div>
  <div class="gridl">Four</div>

</div>