Question

我想将一些div并排放置在父div中，而该div本身包含在父div中。基本上是这样的（所有子div的宽度都必须固定）。

HTML
<div class = "wrapper">
  <div class = "wrapper1">
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child">hello</div>
    <div class = "child"></div>
    <div class = "child"></div>
 </div>
 <div>
 ....other content
 </div>
</div>

最初，我尝试浮动子div，但我还希望将包装div设置为水平滚动，以防子div超过宽度。使用float时，它们仅包裹到下一行。因此，我在包装div上使用了空格：nowrap并将子级div设置为行内块显示。但是问题在于，这仅在所有子div都具有某些内容或所有子div不具有任何内容时才起作用，否则它们在垂直方向上对齐。这里的工作示例： https://jsfiddle.net/xj4pr7m8/16/

下面的CSS代码：

.wrapper {
  height: 100px;
  width: 500px;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 1);
  /* white-space: nowrap; */
}

.wrapper1 {
  width: 100%;
  white-space: nowrap;
}

.child{
  width: 150px;
  height: 80px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 1);
}

此外，如果我添加空白：nowrap到wrapper1或wrapper或同时到两者，它的确不会更改任何内容。有人可以解释为什么div基于内容不对齐吗？除了放置一些占位符文本并将其设置为空子div透明之外，还有什么可能的解决方案。

Answer 1

您丢失了vertical-align属性，请将其设置为top，这很好，您还可以根据此属性将其他值应用于该属性

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

.wrapper {
    height: 100px;
    width: 500px;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 1);
    /* white-space: nowrap; */
}

.wrapper1 {
  width: 100%;
  white-space: nowrap;
}

.child{
    width: 150px;
    height: 80px;
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 1);
    vertical-align:top;
}

<div class = "wrapper">
  <div class = "wrapper1">
    <div class = "child">hello</div>
    <div class = "child">hello</div>
    <div class = "child"></div>
    <div class = "child">hello</div>
    <div class = "child">hello</div>
  </div>
  <div>
  ...other content
  </div>
</div>

Answer 2

另一种方法是将 添加到空div中，它将解决此问题。授予它使用占位符“文本”，但没有额外的CSS规则。

.wrapper {
    height: 100px;
    width: 500px;
    overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
}

.child{
    width: 150px;
    height: 80px;
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 1);
}

<div class = "wrapper">
    <div class = "child">hello</div>
    <div class = "child">hello</div>
    <div class = "child">&nbsp;</div>
    <div class = "child">hello</div>
    <div class = "child">hello</div>
</div>

为什么在div中添加内容会使它们未对齐？

2 个答案: