Html 带有隐藏溢出的内联 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4705324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
inline divs with hidden overflow
提问by Jim
I want to create 3 divs side by side when only one of them is visible.
当只有一个可见时，我想并排创建 3 个 div。
-------------- -------------- --------------
| visible | | invisible | | invisible |
| | | | | |
-------------- -------------- --------------
In order to do this I have tried to create a wrapping div with a 100px width, and hidden overflow. What am I doing wrong?
为了做到这一点，我尝试创建一个宽度为 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>
采纳答案by Paul
You have to make the wrapping div big enough (in width) to hold all three of the divs. Then you could wrap another div around that with the overflow hidden.
您必须使包装 div 足够大（宽度）以容纳所有三个 div。然后你可以在隐藏溢出的情况下环绕另一个 div 。
回答by David Tang
display: inlinedoesn't let you set width. You should use display: inline-blockinstead.
display: inline不允许你设置宽度。你应该display: inline-block改用。
Cross-browser issues:
跨浏览器问题：
This won't work properly with IE, which only allows
inline-blockon naturallyinlineelements, such as<span>s, so you can either convert the<div>s into<span>s or, use an IE hack:display:inline-block; zoom:1; *display:inline;And for Firefox v2 and lower, you'll need
display: -moz-inline-stack;.
这不适用于 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;.
回答by Quentin
You are trying to set a width on an element that is display: inline.
您正在尝试为元素设置宽度display: inline。
Try inline-blockinstead.
试试吧inline-block。
回答by Glycerine
float the three divs left. That'll work
向左浮动三个 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>
Corrected:
更正：
I'm very sorry - I undid some edits. I've changed the width values on the parent div to show the example - so edit it as you please.
非常抱歉 - 我取消了一些编辑。我已经更改了父 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>
