具有动态内容的内部div的CSS宽度规则

Question

我有两个div，一个外部div和一个内部div。我已经将外部div设置为具有固定宽度(505 to )的overflow-x: scroll。

我的内部div包含浮动的左动态内容(意味着可能有一个div或100)，因此宽度可以在50 to到5000 to之间。我试图对内部div进行样式设计，这样它就可以在一行中容纳所有的动态内容，但它的行为并不是这样；它正在按505 so并向下移动到下一行。如果我给它5000 If的宽度，很明显，它是工作的，但内容可能要少得多。我做错了什么？

​

#outer-div {
    width: 505px;
    height: 100%;
    float: left;
    background-color: #fff;
    overflow-x: scroll;
    overflow-y: hidden;
}

#inner-div {
    width: auto;
    display: inline;
}

.dynamic-content {
    width: 62px;
    height: 100%;
    font-size: 13px;
    text-align: center;
    float: left;
}

<div id = "outer-div">
   <div id = "inner-div">
       <div class = "dynamic-content"></div>
       <div class = "dynamic-content"></div>
       <div class = "dynamic-content"></div>
       etc...
   </div>
</div>

​

Answer 1

这不是setting..you需要用white-space:nowrap来停止换行的宽度

​

#outer-div {
  width: 505px;
  height: 100%;
  float: left;
  background-color: #fff;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid grey;
  white-space: nowrap;
}
.dynamic-content {
  height: 100%;
  font-size: 13px;
  text-align: center;
  display: inline-block;
}

<div id="outer-div">

  <div class="dynamic-content">AAAAAAAAAAAAA</div>
  <div class="dynamic-content">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
  <div class="dynamic-content">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
  etc...
</div>

​

Answer 2

你可以用柔性盒来做：

http://codepen.io/anon/pen/grymeG

内部DIV成为弹性容器，flex-wrap:no-wrap保持在一行，而动态内容使flex-shrink: 0;的宽度不减少：

#inner-div {
  width: auto;
  height: 100%;
  overflow-x: visible;
  display: flex;
  flex-wrap: no-wrap;
}

.dynamic-content {
  width: 62px;
  flex-shrink: 0;
  height: 100%;
  font-size: 13px;
  text-align: center;
}

Answer 3

空白:现在强制内部元素保持在同一条线上，但它不能与浮动元素一起工作。因此，您可以使用display:内联块，但是需要对div之间的空格使用技巧(负边距或它们之间的html注释)。

例子：

​

.outer {
  border: 1px solid black;
  height: 100px;
  width: 500px;
  overflow-x: scroll;
  white-space: nowrap;
}
.content {
  display: inline-block;
  margin-left: -4px;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

<div class="outer">
  <div class="inner">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

​