css - 嵌套容器不显示内联，即使嵌套溢出 :hidden

Question

我有 2 <span>嵌套在一个 div 中；

<div class="container">
  <span class="content" style="background-color: #CC0033;">foo</span>
  <span class="content" style="background-color: #FF6600;">bar</span>
</div>

这是CSS；

.container{
  width: 150px;
  height: 100px;
  background-color: #0066CC;
  overflow: hidden;
}
.content{
  width: 96px;
  height: 96px;
  border: solid 2px #333333;
  float: left;
}

但是第二个 child 在第一个 child 之后进入底部，并且内联不可见。容器的宽度是固定的。但是我想完全显示第一个跨度并部分显示第二个跨度。

Here 是 fiddle 。

Answer 1

为此，您必须将 span 包裹在一个 block 元素中，该 block 元素的宽度等于或大于 span 宽度的总和。

jsFiddle example

<div class="container">
    <div id="wrapper">
        <span class="content" style="background-color: #CC0033;">foo</span>
        <span class="content" style="background-color: #FF6600;">bar</span>
    </div>
</div>

CSS

#wrapper {
    width:200px;
}

如果没有足够的水平空间容纳内联和内联 block 元素，它们将换行到下一行。通过将它们包装在 block 级元素中，您可以将其插入容器的喉咙并强制它们彼此相邻出现。