修正：

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无法正常运行，IE只允许inline-block天然inline元素<span>，因此您可以转换{{1进入<div> s或使用IE浏览器：<span>
对于Firefox v2及更低版本，您需要display:inline-block; zoom:1; *display:inline;。

Answer 2

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

Answer 3

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

请尝试inline-block。

Answer 4

浮动三个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 个答案:

修正：