防止 Divs 以百分比宽度开始新行答案

【问题标题】：Prevent Divs from starting a new line with percentage width防止 Divs 以百分比宽度开始新行
【发布时间】：2015-11-15 03:50:44
【问题描述】：

我在另一个 div 中有几个 div，我希望用户能够调整这些 div 的大小，但它们应该保持百分比宽度。这个例子展示了 6 个宽度为 18% 的 div，它们加起来超过了 100%，第 6 个 div 开始换行：

http://jsfiddle.net/v3o3vqqo/

div { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}

.container { 
  width: 100%;
}

.inner { 
  width: 18%;  
  float: left;
  margin: 1px;
}

.red { 
  background-color: red;        
}

.orange { 
  background-color: orange;        
}

.yellow { 
  background-color: yellow;        
}

.green { 
  background-color: green;        
}

.blue { 
  background-color: blue;        
}

.purple { 
  background-color: purple;        
}

<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>

<div class="container"><div class="inner red">&nbsp;</div><div class="inner orange">&nbsp;</div><div class="inner yellow">&nbsp;</div><div class="inner green">&nbsp;</div><div class="inner blue">&nbsp;</div><div class="inner purple">&nbsp;</div>
    <!-- Plus arbitrarily many more boxes... -->
</div>

我希望它显示 2 个孩子，因为它们的宽度为 100%，并且 2 个孩子溢出（这意味着我需要滚动才能看到另一个。

问题是，如果父级的宽度为 100%，而子级的总和超过 100%，它们会开始换行而不是水平滚动。

所以我的问题是如何引起水平滚动？

【问题讨论】：

请不要将不是代码的东西放在代码块中。（尤其是我不明白为什么人们经常把小提琴链接放在代码块中。这是一个链接，不是代码，真的。）
@Roope 很多人将 jsfiddle 的链接放在代码块中，因为他们看到“jsfiddle.net 的链接必须附有代码。请将所有代码缩进 4 个空格”不允许他们发布问题。他们只是缩进链接而不是包含代码。
@Oriol 是的，当然，我现在记得在以前的某个时间点弄清楚了。或许代码块中应该有jsfiddle识别机制。

标签： javascript html css percentage

【解决方案1】：

你不能用浮动来实现这一点。您将不得不使用不同的布局。

你可以使用弹性盒子。默认情况下它有flex-wrap: nowrap，所以没有换行。

您需要使用flex-shrink: 0 来防止当弹性项目占用的空间超过可用空间时收缩。

.container {
  display: flex;
  overflow: auto;
}
.inner {
  width: 18%;
  height: 2em;
  flex-shrink: 0;
}

<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>
<div class="container">
  <div class="inner" style="background: red"></div>
  <div class="inner" style="background: orange"></div>
  <div class="inner" style="background: yellow"></div>
  <div class="inner" style="background: green"></div>
  <div class="inner" style="background: blue"></div>
  <div class="inner" style="background: purple"></div>
</div>

或者，您可以使用inline-block，并使用white-space: nowrap 防止换行。但是，请注意How to remove the space between inline-block elements?

.container {
  overflow: auto;
  white-space: nowrap;
}
.inner {
  display: inline-block;
  width: 18%;
  height: 2em;
}

<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>
<div class="container">
  <div class="inner" style="background: red"></div
  ><div class="inner" style="background: orange"></div
  ><div class="inner" style="background: yellow"></div
  ><div class="inner" style="background: green"></div
  ><div class="inner" style="background: blue"></div
  ><div class="inner" style="background: purple"></div>
</div>

【讨论】：

【解决方案2】：

我理解您的问题的一个可能解决方案如下。

基本思路：使用display: inline-block，并通过将结尾的> 放在下一行来防止出现空白问题。

div { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}
.container { 
  width: 100%;
}
.inner {
  display: inline-block;
  width: 20%;
} 
.red { 
  background-color: red;        
}    
.orange { 
  background-color: orange;        
}
.yellow { 
  background-color: yellow;        
}
.green { 
  background-color: green;        
}
.blue { 
  background-color: blue;        
}
.purple { 
  background-color: purple;        
}

<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>

<div class="container">
    <div class="inner red">&nbsp;</div
    ><div class="inner orange">&nbsp;</div
    ><div class="inner yellow">&nbsp;</div
    ><div class="inner green">&nbsp;</div
    ><div class="inner blue">&nbsp;</div>
    <!-- Plus arbitrarily many more boxes... -->
</div>

【讨论】：