Question

如果宽度超过容器宽度，我无法弄清楚如何保持多个div内联。如果所有div的宽度大约是1000 px而容器的宽度是500，我希望div与容器重叠，并且出现一个水平滚动条。

#container {
  overflow: hidden;
  background: red;
  width: 500px;
  height: 500px;
}
#container>div {
  border: 1px solid #000;
  width: 30%;
  height: 100px;
  margin: 10px;
  float: left;
}

<div id="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
  <br style="clear: both;">
</div>

小提琴：Click

Answer 1

不要使用float，使用带有容器的内联块来设置白色空间，然后将overflow: auto;添加到容器中以根据需要触发滚动条。

<强> jsFiddle

#container{
  white-space: nowrap;
  overflow: auto;
}
#container>div{
  display: inline-block;
}

Answer 2

添加一些CSS

#container {
    background: red none repeat scroll 0 0;
    height: 200px;
    overflow: auto;
    white-space: nowrap;
    width: 500px;
}

#container > div {
    border: 1px solid #000;
    display: inline-block;
    height: 100px;
    margin: 10px;
    width: 30%;
}

http://jsfiddle.net/WGCyu/1325/

Answer 3

正如Pangloss所说，不要使用 float ，而是将它们显示为内联。并使用 overflow-x：scroll

#container {
  overflow: hidden;
  background: red;
  width: 500px;
  height: 500px;
  white-space: nowrap;
  overflow-x:scroll
}
#container>div {
  border: 1px solid #000;
  width: 30%;
  height: 100px;
  margin: 10px;
  display: inline-block;
}

<div id="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
  <br style="clear: both;">
</div>

多个内联div超过容器宽度

3 个答案: