Question

我有两个div，一个外部div和一个内部div。我将外部div设置为具有overflow-x: scroll的固定宽度（505px）。

我的内部div包含浮动的左侧动态内容（意味着可能有一个div或100），因此宽度可以在50px到5000px之间。我试图设计内部div的样式，以便它可以在一条线上容纳动态内容，但它的表现并不像那样;它击中505px并向下移动到下一行。如果我给它宽度为5000px，显然它可以正常工作，但内容可能比这少得多。我做错了什么？

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这不是宽度设置..您需要使用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

你可以使用flexbox：

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

内部DIV成为弹性容器，flex-wrap:no-wrap保持在一行overflow-x: visible;，动态内容得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

white-space：nowrap强制内部元素保持在同一条线上，但它不能使用浮动元素。所以你可以使用display：inline-block但是你需要在div之间使用一个技巧（负边距或它们之间的html注释）。

示例：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

您需要使用white-space:no-wrap;

风格将是这样的：

#outer-div {
    width: 505px;
    height: 100%;
    float: left;
    background-color: #fff;
}

#inner-div {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.dynamic-content {
    height: 100%;
    font-size: 13px;
    text-align: center;
    display: inline-block;
}

在此处查看您的演示https://jsfiddle.net/IA7medd/o831zdqs/

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

4 个答案: