0

我在页面上最多有 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 上尝试了绝对位置。我正在尝试结合不同的东西，只是希望它能起作用，但必须有一个适当的方法来解决这个问题。

4

3 回答 3

1

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

http://jsfiddle.net/fdXLb/

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

于 2013-10-30T16:22:58.567 回答
0

如果一个 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;
}
于 2013-10-30T16:16:49.883 回答
0

一个很好的技巧是用来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 是否仍然存在，但在屏幕上以您想要的宽度显示。我假设您想继续overflow-x: hidden;在父 div 上使用，因此在执行 javascript 端时不会有丑陋的滚动条:)

于 2013-10-30T16:25:04.413 回答