gpt4 book ai didi

html - 停止 float div 换行

转载 作者:技术小花猫 更新时间:2023-10-29 11:29:44 25 4
gpt4 key购买 nike

我想要一排 div(单元格),如果浏览器太窄而不适合它们,它们不会换行。

我搜索了 Stack,但找不到我认为应该是一个简单的 css 问题的有效答案。

单元格具有指定的宽度。但是我不想指定行的宽度,宽度应该自动为其子单元格的宽度。

如果视口(viewport)太窄而无法容纳行,则 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>

目前我实际上是将行的宽度硬编码为一个非常大的数字。

最佳答案

CSS 属性 display: inline-block 就是为了解决这个需求而设计的。您可以在这里阅读一些相关信息:http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

下面是它的使用示例。关键元素是 row 元素有 white-space: nowrapcell 元素有 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>

关于html - 停止 float div 换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5616360/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com