Nic*_*las 81 html word-wrap css-float
我希望有一行div(单元格),如果浏览器太窄而不适合它们,则不会换行.
我搜索过Stack,找不到我认为应该是一个简单的CSS问题的工作答案.
单元格具有指定的宽度.但是我不想指定行的宽度,宽度应该自动为其子单元格的宽度.
如果视口太窄而无法容纳行,则div应该溢出滚动条.
请提供您的答案作为工作代码片段,因为我已经尝试了很多我在其他地方看到的解决方案(比如指定宽度:100%并且它们似乎不起作用).
我正在寻找一个HTML/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>目前,我实际上将行的宽度编码为一个非常大的数字.
Cal*_*vin 104
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>
小智 5
阅读约翰的回答后，我发现以下内容似乎对我们有用（不需要指定宽度）：
<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>