停止包装浮动div
我想要有一行div(单元格)，如果浏览器太窄而无法容纳它们，它们就不会换行。
我已经搜索了Stack，但找不到一个我认为应该是一个简单的css问题的有效答案。
单元格具有指定的宽度。但是，我不想指定行的宽度，宽度应该自动为其子单元格的宽度。
如果视区太窄，无法容纳行，那么div应该会溢出滚动条。
请提供你的答案作为工作代码片段，因为我已经尝试了很多我在其他地方看到的解决方案(比如指定宽度: 100%，但它们似乎不起作用)。
我正在寻找一个超文本标记语言/CSS唯一的解决方案，没有JavaScript。
.row {
float: left;
border: 1px solid yellow;
width: 100%;
overflow: auto;
}
.cell {
float: left;
border: 1px solid red;
width: 200px;
height: 100px;
}<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell">c</div>
</div>
目前，我实际上正在将行的宽度硬编码为一个非常大的数字。
回答 5
Stack Overflow用户
发布于 2012-06-13 09:11:14
CSS属性display: inline-block就是为满足这一需求而设计的。你可以在这里读到一些关于它的内容：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
下面是一个使用它的例子。关键元素是row元素具有white-space: nowrap，而cell元素具有display: inline-block。这个示例应该可以在大多数主要浏览器上运行；此处提供了兼容性表：http://caniuse.com/#feat=inline-block
<html>
<body>
<style>
.row {
float:left;
border: 1px solid yellow;
width: 100%;
overflow: auto;
white-space: nowrap;
}
.cell {
display: inline-block;
border: 1px solid red;
width: 200px;
height: 100px;
}
</style>
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell">c</div>
</div>
</body>
</html>Stack Overflow用户
发布于 2011-07-10 06:29:29
您希望在行上定义min-width，这样当浏览器调整大小时，它不会低于该值并进行换行。
Stack Overflow用户
发布于 2014-10-31 22:58:41
在阅读了John的答案后，我发现以下方法似乎对我们有效(不需要指定宽度)：
<style>
.row {
float:left;
border: 1px solid yellow;
overflow: visible;
white-space: nowrap;
}
.cell {
display: inline-block;
border: 1px solid red;
height: 100px;
}
</style>
<div class="row">
<div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
<div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
<div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
</div>https://stackoverflow.com/questions/5616360
复制相似问题