Question

这就是我所拥有的

This is what I have

这就是我想要的

This is what I want

基本上橙色元素是一个“容器”div，它有溢出：隐藏;我希望它的孩子们能够“适应它”，即使它正在向右溢出。第一张图片代表我得到的第二张图片，第二张图片代表我期望代码做的事情。

为了解决这个问题，我添加了另一个宽度为div的div：1000000px;但我认为这不是一个干净的解决方案。有没有其他方法可以解决这个问题？

（我正在使用最新的Google Chrome）

Answer 1

在容器元素上，指定white-space：nowrap并且不要将项目浮动到内部，而是在它们上设置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更改为如下所示，那么读取了一点，奇怪的是，连续的内联块元素之间的空格被删除了：

<div class="container">
    <div class="item"></div><div class="item"></div><div class="item"></div>
</div>

查看此问题的答案：Unwanted margin in inline-block list items。

Answer 2

这是一个小提琴：http://jsfiddle.net/XK7tS/

溢出问题：隐藏;和漂浮

2 个答案: