这就是我所拥有的
这就是我想要的
基本上，橙色元素是一个“容器”div，它具有溢出:隐藏；我希望它的子 div 能够“适合它”，即使它向右溢出。第一张图片代表我得到的结果，第二张图片代表我期望代码执行的操作。
为了解决这个问题，我添加了另一个宽度为 1000000px 的 div；但我不认为这是一个干净的解决方案。还有其他方法可以解决这个问题吗？
(我使用的是最新的 Google Chrome)
最佳答案
在容器元素上，指定white-space:nowrap并且不要将元素 float 在其中，而是在它们上设置display: inline-block。
这是一个例子:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style type="text/css">
.container{
height: 130px;
width: 550px;;
background: #111;
white-space:nowrap;
overflow:hidden;
}
.item{
display: inline-block;
width: 200px;
height: 100px;
background-color:aqua;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
更新
做了一些阅读，奇怪的是，如果您将 html 更改为如下所示，连续内联 block 元素之间的空格将被删除:
<div class="container">
<div class="item"></div><div class="item"></div><div class="item"></div>
</div>
查看此问题的答案:Unwanted margin in inline-block list items .
关于html - 溢出问题: hidden; and floats，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6758020/