Question

我有一个外部div包含内部html标签。我想只查看内部标签的外部div样式中指定的某些尺寸，而不会挤压内部内容以适应外部尺寸。我认为它足够清晰

我的尝试：这些是我内心的内容

`<div id="innerDiv1" style=" width:50px; height:50px; background-color:Aqua"></div>
 <div id="innerDiv2" style=" width:50px; height:50px; background-color:Red"></div>
 <div id="innerDiv3" style=" width:50px; height:50px; background-color:Yellow;position:absolute; left:100px; top:80px"></div>
 <div id="innerDiv4" style=" width:50px; height:50px; background-color:Fuchsia; position:absolute; left:100px; top:20px"></div>
 <div id="innerDiv5" style=" width:50px; height:50px; background-color:Lime"></div>`

我试图添加外部div覆盖所有内部并仅显示其内部内容的一部分而不改变它们的位置并将任何东西隐藏在外部div的范围内，其尺寸为（50X50），但我没有'得到正确的结果

   <div id="outerDiv" style=" width:50px; height:50px; background-color:Orange">
     <div id="innerDiv1" style=" width:50px; height:50px; background-color:Aqua"></div>
     <div id="innerDiv2" style=" width:50px; height:50px; background-color:Red"></div>
     <div id="innerDiv3" style=" width:50px; height:50px; background-color:Yellow;position:absolute; left:100px; top:80px"></div>
     <div id="innerDiv4" style=" width:50px; height:50px; background-color:Fuchsia; position:absolute; left:100px; top:20px"></div>
     <div id="innerDiv5" style=" width:50px; height:50px; background-color:Lime"></div>
     </div>

Answer 1

用户溢出：隐藏在外框css中

 <div id="outerDiv" style=" overflow:hidden;width:50px; height:50px; background-color:Orange">
     <div id="innerDiv1" style=" width:50px; height:50px; background-color:Aqua"></div>
     <div id="innerDiv2" style=" width:50px; height:50px; background-color:Red"></div>
     <div id="innerDiv3" style=" width:50px; height:50px; background-color:Yellow;position:absolute; left:100px; top:80px"></div>
     <div id="innerDiv4" style=" width:50px; height:50px; background-color:Fuchsia; position:absolute; left:100px; top:20px"></div>
     <div id="innerDiv5" style=" width:50px; height:50px; background-color:Lime"></div>
     </div>

Answer 2

试试这个：

<div id="outerDiv" style=" width:50px; height:50px; background-color:Orange; position:absolute; overflow:hidden">
     <div id="innerDiv1" style=" width:50px; height:50px; background-color:Aqua"></div>
     <div id="innerDiv2" style=" width:50px; height:50px; background-color:Red"></div>
     <div id="innerDiv3" style=" width:50px; height:50px; background-color:Yellow;position:absolute; left:100px; top:80px"></div>
     <div id="innerDiv4" style=" width:50px; height:50px; background-color:Fuchsia; position:absolute; left:100px; top:20px"></div>
     <div id="innerDiv5" style=" width:50px; height:50px; background-color:Lime"></div>
</div>

如何制作具有固定尺寸的外部div显示其内部内容的一部分而不改变其位置

2 个答案: