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

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

.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>

Answer 2

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

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

修复方法是确保您的包装器不会小于子组合。

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

Answer 3

您可以尝试从包装中删除表格单元格显示规则，并设置子div上的百分比（或最小宽度），如 jsFiddle example 。

Answer 4

虽然这是一篇很老的帖子，但我认为我遇到的问题是你希望所有这些单元格都是固定大小，而不是％，对吧？您选择的解决方案更改了您指定width:200px;

的初始格式

好吧，我建议你看一下：http://jsfiddle.net/gn2bg/

我做的唯一一件事就是在细胞周围添加内包装：

.inwrapper{
    float:left;
    overflow: hidden;
    min-width: 830px;
}

和新的HTML这样：

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

请注意，您的包装需要80％的空间。然而，inwrapper告诉它的大小是固定的 - 830px（所有内部div大小的总和加上填充空间。）这种方式inwrapper使用'elbows'来拉伸宽度，并覆盖这80％的'包装'

我知道您已经决定了什么是最佳解决方案。我将此答复留给将来需要确切答案的其他人。

Answer 5

应该这样做：

 <div class="wrapper">
     <div style="width:850px">
        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>
     </div>
 </div>

这将在任何浏览器上得到支持。 http://jsfiddle.net/5GrKU/3/

Answer 6

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>

<强> CSS

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

供您参考我还添加了演示的URL。 http://jsfiddle.net/sg8FE/

<强>更新

只需将包装器类中的display:inline更改为display:block，其余都是正确的，并且div是居中的。

Answer 7

通过在内部div中给出固定宽度，无论视口大小是多少，都会强制它们具有该宽度。并且外部div的宽度为80％，您的视图端口宽度会缩小。您需要为所有div提供固定宽度或为所有div提供相对宽度。

防止浮动左div转到新行

7 个答案: