html - 内容隐藏但不断线

Question

我想创建一个固定宽度和高度为 100px 的 div 容器，它应该像一个窗口一样工作。

然后另外

• 它应该让内容 div 彼此相邻“浮动”，而不是换行。
• 容器应该隐藏所有比它的宽度或高度更长的东西。

我必须使用

overflow:hidden 

?

在这里摆弄：

container and content

http://jsfiddle.net/hd8Bm/1/

Answer 1

这是一个示例 HTML 结构：

<div id="container">
   <div class="content"></div>
   <div class="content"></div>
   <div class="content"></div>
   <div class="content"></div>
</div>

这是CSS需要的样子：

#container
{
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid #000;
overflow: auto;
white-space: nowrap;
}

.content
{
width: 50px;
height: 50px;
display: inline-block;
border: 1px dashed #000;
}

这是一个工作小提琴：http: //jsfiddle.net/HB8kB/

诀窍是由 white-space: nowrap;

Answer 2

好的，如果你想隐藏某些东西，或者防止它被点击，我的意思是，在较新的浏览器上，position:absolute 可能会起作用。
float:left 有时也很有帮助。

Answer 3

这就是你想要的。

http://jsfiddle.net/hd8Bm/9/

display:inline没有必要。