Question

我将元素包装到父div中，并且它们全部浮动到左侧。父元素具有overflow: scroll，当父元素变得比子元素更薄时，我不希望子元素断行，但是父元素要水平溢出它们。

我发现我可以通过使用：display: inline-block来让孩子们表现得像文字一样，然后将父母设为white-space: nowrap。这样，他们就不会破坏。

但我想要一个孩子浮动的解决方案。有人能帮助我吗？

HTML

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

.parent{
  padding: 3px;
  width: 100%;
  height: 200px;
  background-color: green;
  overflow: scroll;

  /*does the trick*/
  white-space: nowrap;
}
.child{
  display: inline-block;
  height: 190px;
  width: 80px;
  background-color: gray;
  margin-left: 10px;
}

[编辑] - 由于保利在评论中提到，我必须说不，他们不会必须上班才能工作。我知道这个。但我想知道是否还有另一种方法可以实现这一目标，而且我认为除了SO社区之外没有更好的地方

Answer 1

Flexbox可以做到这一点，它甚至不需要white-space:nowrap。

.parent {
  padding: 3px;
  height: 200px;
  background-color: green;
  overflow: auto; /* or scroll */
  display: flex;
}
.child {
  height: 190px;
  flex: 0 0 80px;
  background-color: gray;
  margin-left: 10px;

}

＆＃13;

.parent {
  padding: 3px;
  height: 100px;
  background-color: green;
  overflow: scroll;
  display: flex;
}
.child {
  height: 90px;
  flex: 0 0 80px;
  background-color: gray;
  margin-left: 10px;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

＆＃13;

JSfiddle Demo

Answer 2

display: table确实也这样做，但flex是比table更适合做布局的方法，除非你需要它来处理例如IE8 / 9，flex 1}}没有，但是再一次，您的inline-block比table

更合适

＆＃13;

.parent{
  padding: 3px;
  max-width: 100%;
  height: 200px;
  background-color: green;
  overflow: scroll;
  display: table;  
}
.child{
  display: table-cell;  
  height: 190px;
  min-width: 80px;
  background-color: gray;
  padding-left: 10px;
  border: 1px solid white
}

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

＆＃13;

有没有一种方法，比内联块，for元素不断线？

2 个答案: