13

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

7 回答 7

4

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

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

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

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

于 2012-06-05T04:10:06.027 回答
2

嗨，我认为你应该检查一下这个演示

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

于 2012-06-05T04:39:07.433 回答
2

尽管这是一篇旧帖子，但我认为我也遇到的问题是您希望所有这些单元格的大小都是固定的，而不是 %，对吧？您选择的解决方案更改了您指定的初始格式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 使用“肘部”来拉伸宽度，并覆盖这 80% 的“包装器”

我了解您已经决定什么是您的最佳解决方案。我将把这个回复留给未来需要准确回答你的确切问题的任何人。

于 2013-05-31T19:03:54.977 回答
1

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

于 2012-06-05T03:52:53.693 回答
0

这应该够了吧 ：

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

于 2012-06-05T03:55:04.570 回答
0

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 居中。

于 2012-06-05T04:14:31.063 回答
0

通过在您的内部 div 中提供固定宽度，无论视口的大小如何，您都在强制它们具有该宽度。并且将外部 div 的宽度设置为 80%，您将随着视口的宽度缩小其大小。您需要为所有这些 div 提供固定宽度或为所有 div 提供相对宽度。

于 2012-06-05T06:50:53.893 回答