具有隐藏溢出的内联div

Question

当其中只有一个可见时,我想并排创建3个div.

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

为了做到这一点,我试图创建一个100px宽度和隐藏溢出的包装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>

Answer 1

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;.

Answer 2

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