Question

我有一个div“容器”，比如400px宽度，里面有一个左浮动的div - “box”100px宽度。有六个“盒子”div，所以它们的汇总宽度大于400px，这导致div行被包裹，我得到两行，每行有4和2个元素。如何让这6个div成为一行，一行而不是两行？

Answer 1

您只需在子元素white-space: nowrap上使用display: inline-block。 Live demo here (click).

  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

的CSS：

.container {
  width: 400px;
  background: black;
  white-space: nowrap;
  overflow: scroll;
}

.container > div {
  height: 50px;
  width: 100px;
  background: #555;
  display: inline-block;
  margin: 10px;
}

Answer 2

假设你继续使用float：left; ...如果你的容器的设置宽度为400px，那么你的子div总和也不能超过400px宽。这包括任何填充，边距或边框空间。

简单地回答你的问题，有几种方法......

使容器宽600px而不是400px ......
将子元素设置为66px宽而不是100px ...

更好的选择是使用百分比...

使子元素宽16.666667％。

Answer 3

您需要将display: inline-block提供给容器的子级，并让white-space: nowrap使它们水平流动。这是CSS

#Container {
    width: 400px;
    border: 1px solid black;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.inside {
    width: 100px;
    height: 300px;
    border: 1px solid black;
    display: inline-block;
}

和HTML

<div id="Container">
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
 </div>

以下是您的问题的小提琴http://jsfiddle.net/sgaurav/vZLWQ/

Answer 4

希望它会帮助你

 display:inline-block;

如何使一行div在另一个div中的一行中流动？

4 个答案: