为什么这些 img 不在父 div 中？答案

【问题标题】：Why aren't these img's counted in the parent div?为什么这些 img 不在父 div 中？
【发布时间】：2016-05-03 11:44:44
【问题描述】：

底部的图像不计入 all 类的 overflow:hidden 属性。它们溢出并且定位非常困难，因为所有 div 的边界没有跟随图像向下。

<div class="all">
    <div id="banner"><img src="images/banner1.jpg" alt="PCXD Banner"/></div>
    <div class="nav">
        ...
    </div>

    <h1 class="under"><br/><br/>Image><br/></h1>

    <table>
        ...
    </table>

        <img id="reviewI1" src="images/RL1.jpg" alt="Rocket League 1"/>
        <img id="reviewI2" src="images/RL2.jpg" alt="Rocket League 2"/>
        <a href="http://store.steampowered.com/app/252950/"><img id="steam2" src="images/steam.png" alt="Steam"/></a>
</div>

CSS：

.all{
width:1200px;
margin:auto;
border:5px solid #404040;
overflow:hidden;
}

#reviewI1 {
width:500px;
position:absolute;
top:415px;
left:1010px;
border: 3px solid #fedd58;
}

#reviewI2 {
width:500px;
position:absolute;
top:710px;
left:1010px;
border: 3px solid #fedd58;
}

#steam2 {
width:100px;
left:1210px;
position:absolute;
top:1010px;
}

【问题讨论】：

你的css在哪里？
@Alexis 抱歉，已添加

标签： html css xhtml overflow

【解决方案1】：

您需要为 .all 类添加高度，例如高度：400px；

【讨论】：

【解决方案2】：

您的图片位于absolute 位置，这意味着它们在 DOM 流之外。 所以overflow 属性不适用于这种情况。您需要删除绝对位置才能使用它：

#reviewI1 {
  width:500px;
  top:415px;
  border: 3px solid #fedd58;
}

See this fiddle

【讨论】：

【解决方案3】：

从图像样式中删除“位置：绝对”。

【讨论】：