使用滚动条

Question

我试图在容器div中将几个div元素彼此相邻。容器应该有一个水平滚动条。

我尝试过不同的解决方案，但每个解决方案都存在不同的问题。请注意，我正在寻找一个“通用”解决方案。 这意味着它应该与

一起使用

• 任何容器高度
• 任意数量的儿童（宽度可能不同）

1

display: inline-block; 

问题：当div没有“相似”内容时，它们没有正确对齐。

jsfiddle：https://jsfiddle.net/k08m6y6e/

2

float: left;

问题：盒子换行 - 没有滚动条

jsfiddle：https://jsfiddle.net/k08m6y6e/1/

3

display: table-cell; 

问题：没有滚动条 - 这实际上对我有意义，但这意味着这不会解决我的问题

jsfiddle：https://jsfiddle.net/k08m6y6e/5/

1. Flexbox的; 问题：忽略了孩子的最小宽度加上浏览器之间似乎不一致（尤其是IE）

有人可以帮我提出一个好的解决方案吗？

-

解

这里提供的答案（来自迈克尔和安德烈）都很有效;非常感谢你。可悲的是，我只能接受一个。

小注意：Internet Explorer似乎都存在两个解决方案的问题。滚动条覆盖儿童的内容和/或儿童的一小部分底部被切断。 Chrome和Firefox按预期工作。

Answer 1

Flexbox救援：

＆＃13;

＆＃13;

#container {
  height:150px;
  width:400px;
  overflow-y:hidden;
  overflow-x:auto;
  white-space: nowrap;
  display: flex;
}

.hdiv {
  border:solid 1px black;
  display:block;
  min-width: 100px;
  flex-shrink: 0;
}
.hdiv img {
  display: block;
  height: 100%;
}

＆＃13;

<div id="container">
  <div class="hdiv">
    Text
  </div>
  <div class="hdiv">
    Line 1 <br/>
    Line 2
  </div>
  <div class="hdiv">
    <img src="https://www.google.at//images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="g" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用inline-block，您可以使用vertical-align来对齐div。

#container {
  height:150px;
  width:400px;
  overflow-y:hidden;
  overflow-x:auto;
  white-space: nowrap;
}

.hdiv {
  border:solid 1px black;
  height:100%;
  min-width:100px;
  display:inline-block;
  vertical-align: top;
}

<div id="container">
  <div class="hdiv">
    Text
  </div>
  <div class="hdiv">
    Line 1 <br/>
    Line 2
  </div>
  <div class="hdiv">
    <img src="https://www.google.at//images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="g" style="height:100px" />
  </div>
</div>

由于您希望垂直对齐每个单元格中的内容，因此您可以使用inline-flex代替inline-block，并使用align-items: center垂直居中。我还将justify-content: center添加到水平居中。

#container {
  height:150px;
  width:400px;
  overflow-y:hidden;
  overflow-x:auto;
  white-space: nowrap;
}

.hdiv {
  border:solid 1px black;
  height:100%;
  min-width:100px;
  display:inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
}

<div id="container">
  <div class="hdiv">
    Text
  </div>
  <div class="hdiv">
    Line 1 <br/>
    Line 2
  </div>
  <div class="hdiv">
    <img src="https://www.google.at//images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="g" style="height:100px" />
  </div>
</div>