Question

我在页面上最多有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并将'wrapper'的溢出设置为隐藏。我已经尝试将显示设置为所有div的内联块。我已经尝试过所有div的绝对位置。我正在尝试将不同的东西组合在一起，希望它能够正常工作，但必须采用适当的方法。

Answer 1

告诉我，如果你喜欢这个，我会使用display:inline-block

http://jsfiddle.net/fdXLb/

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

Answer 2

如果一个div的宽度为100％，则没有空间让另一个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;
}

Answer 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时就不会有一个丑陋的滚动条：）

100％宽度的div彼此相邻

3 个答案: