【问题标题】：inline divs with hidden overflow具有隐藏溢出的内联 div
【发布时间】：2011-06-09 23:19:20
【问题描述】：

当只有一个可见时，我想并排创建 3 个 div。

-------------- -------------- --------------
| visible    | | invisible  | | invisible  |
|            | |            | |            |
-------------- -------------- --------------

为了做到这一点，我尝试创建一个 100 像素宽度的包装 div，并隐藏溢出。我做错了什么？

<div style="width:50px;height:349px; overflow:hidden">
<div style="display: inline;">first div</div>
<div style="display: inline;">second div</div>
<div style="display: inline;">third div</div>
</div>

【问题讨论】：

标签： css html width overflow hidden

【解决方案1】：

您正在尝试为 display: inline 的元素设置宽度。

改用inline-block。

【讨论】：

这样，div 仍然是一个重叠显示，而不是并排显示。

【解决方案2】：

display: inline 不允许您设置宽度。你应该改用display: inline-block。

跨浏览器问题：

这不适用于 IE，它只允许 inline-block 自然地出现在 inline 元素上，例如 <span>s，因此您可以将 <div>s 转换为 <span>s或者，使用 IE hack：display:inline-block; zoom:1; *display:inline;
对于 Firefox v2 及更低版本，您需要display: -moz-inline-stack;。

【讨论】：

【解决方案3】：

向左浮动三个 div。可以的

<div style="width:50px;height:349px; overflow:hidden; border solid 1px;">
   <div style="float:left;width:100px; border solid 1px">first div</div>
   <div style="float:left;width:100px; border solid 1px;">second div</div>
   <div style="float:left;width:100px; border solid 1px;">third div</div>
</div>

更正：

非常抱歉 - 我撤消了一些编辑。我已经更改了父 div 上的宽度值以显示示例 - 请随意编辑它。

<div style="width:120px;height:349px; overflow:hidden; border: solid 1px;">
   <div style='height: 349px; width: 310px'>
    <div style="float:left;width:100px; height: 100px; border: solid 1px">first div</div>
    <div style="float:left;width:100px; height: 100px; border: solid 1px;">second div</div>
    <div style="float:left;width:100px; height: 100px; border: solid 1px;">third div</div>
   </div>
</div>

【讨论】：

这样，div 仍然是一个重叠显示，而不是并排显示。

【解决方案4】：

您必须使包装 div 足够大（宽度）以容纳所有三个 div。然后你可以用隐藏溢出的方式包裹另一个 div。

【讨论】：