Question

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

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％togheter和2个孩子溢出（这意味着我需要滚动查看另一个。

问题是，如果父级的宽度为100％且子级的总和超过100％，则会启动一个新行，而不是导致水平滚动。

所以我的问题是如何导致水平滚动？

Answer 1

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

您可以使用flexbox。默认情况下它有flex-wrap: nowrap，因此没有换行。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: