内容隐藏但不断线答案

【问题标题】：content hidden but not breaking line内容隐藏但不断线
【发布时间】：2013-07-01 09:43:24
【问题描述】：

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

然后加上

它应该有内容 div 并排在左边“浮动”，而不是换行。
容器应隐藏所有长于其宽度或高度的部分。

我必须使用吗

overflow:hidden

在这里摆弄：

container and content

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

【问题讨论】：

你的问题是什么？
我想要的是一辆保时捷。你能帮我吗？马吕斯你试过什么？
您能向我们展示代码示例以及预期的输出吗？ What have you tried?
我的问题是：我怎样才能让每个内容彼此相邻而不是换行

标签： html css fixed

【解决方案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;

【讨论】：

不错的答案。但是，请注意空格继承。所以如果你不想让最里面的 div 也有nowrap，你应该在它们上显式设置white-space:normal。
@MrLister 这是真的。我没有明确提到这一点，因为我不确定 OP 在父容器中实际上会做什么，比如图像或其他东西。但感谢您提请注意。

【解决方案2】：

这就是你想要的。

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

display:inline 不是必需的。

【讨论】：

不完全是。正如我所写，有一个较小的容器作为其内容元素......有些会换成新行但它们必须在一个中
在您的示例中，减小容器宽度将以换行结束第二个内容元素的新行

【解决方案3】：

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

【讨论】：