相邻的 100% 宽度的 div答案

【问题标题】：divs of 100% width next to one another相邻的 100% 宽度的 div
【发布时间】：2013-10-31 00:25:04
【问题描述】：

我在页面上最多有 4 个 div，它们必须水平“相邻”。每个 div 将有 100% 的宽度。

因此，除了第一个之外，所有内容都将显示在页面之外，直到我设置其他样式（最终使用 jQuery）。

如何设置 div 的样式以实现此目的？

标记：

<div class="wrapper">
    <div class="panel">
    </div>
    <div class="panel">
    </div>
    <div class="panel">
    </div>
    <div class="panel">
    </div>
</div>

我的尝试

我尝试将所有 div 都向左浮动并将“包装器”的溢出设置为隐藏。我尝试将显示设置为所有 div 的内联块。我已经在所有 div 上尝试了绝对位置。我正在尝试结合不同的东西，只是希望它能起作用，但必须有一个适当的方法来解决这个问题。

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/6597889/…
这里有一个小提琴jsfiddle.net/chriz123/3CpL8/3

标签： css html markup

【解决方案1】：

如果你想要我使用这样的东西，请告诉我display:inline-block

http://jsfiddle.net/fdXLb/

那我可以做一个更好的解释。

【讨论】：

【解决方案2】：

如果一个 div 的宽度为 100%，则另一个 div 将没有空间与该 div 对齐。

所以我想说对齐它们只使用 20% 的宽度。

25% 也适用于 4 个 div，但您不能使用任何边框、边距或内边距。

你也可以在 px 中设置最小宽度。

看看这个例子：http://jsfiddle.net/3CpL8/ 可能有帮助

.wrapper > div {
    width:20%;
    background-color:orange;
    height:60px;
    float:left;
    min-width:100px;
    margin:5px;
}

【讨论】：

非常感谢您的建议，但我需要每个 div 按宽度填充屏幕，或者至少让它看起来像这样。
@deemac 那么 25% 和内部 100% jsfiddle.net/3CpL8/1 做这个工作吗？

【解决方案3】：

一个不错的技巧是使用white-space: nowrap; 来防止div 移动到下一行。这就是你的 CSS 的样子：

.wrapper {
  white-space: nowrap;
  overflow-x: hidden;
}

.wrapper > div {
  width:100%;
  background-color:red;
  height:60px;
  display: inline-block;
  min-width:100px;
  margin:5px;
}

查看此Fiddle 并使用浏览器的检查器查看 div 是否仍然存在，但以您想要的宽度离开屏幕。我假设您想继续在父 div 上使用 overflow-x: hidden;，这样在执行 javascript 端时就不会出现丑陋的滚动条 :)

【讨论】：