我有以下示例:在这里输入链接描述
我想存档的是，类'following'的div将显示在一行中，带有红色的'left'容器。 在本例中，第三个蓝色容器后面有一个换行符。 如果有两个许多下面的蓝色项目，我想有一个水平滚动条，而不是换行。 本例中的第二行是ok的，因为它没有足够的蓝色容器。
null
.container {
width:600px;
height:200px;
border:1px solid;
}
.row {
clear: both;
}
.left {
width: 200px;
height:50px;
background:red;
float: left;
border: 1px solid black;
}
.following {
width: 100px;
height: 50px;
background: blue;
border: 1px solid black;
float: left;
} <div class="container">
<div class="row">
<div class="left"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
</div>
</div>
null
这就是你要找的吗？ 我已经将它更新为使用flex布局。
null
.container {
width:600px;
height:auto;
border:1px solid;
display: flex;
overflow-y: hidden;
overflow-x: auto;
}
.left {
width: 200px;
height:50px;
background:red;
border: 1px solid black;
flex-shrink: 0;
}
.following {
width: 100px;
height: 50px;
background: blue;
border: 1px solid black;
flex-shrink: 0;
}<div class="container">
<div class="left"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
</div>
<div class="container">
<div class="left"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
</div>
这就是你问题的答案吗？
null
.container {
width:600px;
height:200px;
border:1px solid;
overflow: auto;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
align-items: center;
}
.left {
min-width: 200px;
height:50px;
background:red;
border: 1px solid black;
}
.following {
min-width: 100px;
height: 50px;
background: blue;
border: 1px solid black;
}<div class="container">
<div class="row">
<div class="left"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
</div>
</div>