我有以下 CSS,它使图像在到达 DIV 末尾后断行,但它后面的 DIV 容器没有根据图像取得高度。高度应随图像一起扩展。这是屏幕截图 http://prnt.sc/e3fqvr .
CSS:
.image-container {
width: 163px;
height: 100px;
padding: 0px 0px 65px 0px;
font-size: 12px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-right: 13px;
display: inline-block;
float: left;
}
.proof-container {
width: 100%;
position: absolute;
}
.container {
width: 100%;
min-height: 500px;
}
.container-inside {
border: 1px solid #1df2f2;
width: 100%;
border-radius: 5px;
margin-top: 10px;
padding: 20px;
box-sizing: border-box;
}
HTML:
<div class="container">
<div class="container-inside">
<div class="container-title">Images</div>
<br>
<div class="proof-container">
<?php while($faf = $prooq->fetch()){ extract($faf); ?>
<div class="image-container"> <img class="myThumb" id="myImg" src="https://wallpaperstock.net/wallpapers/thumbs1/45957hd.jpg" alt="" width="160" height="100">
<div class="image-text">shreyansh ($8.75)<br>
<span><?php echo date('jS M, Y (h:i a)', strtotime($pr_uptime)); ?></span></div>
</div>
<div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="modalImg">
<div id="caption"></div>
</div>
<?php } ?>
</div>
</div>
</div>
请帮助我开发。
最佳答案
尝试删除 css 属性
position:absolute from proof-container
并添加
overflow:hidden to .container-inside div
关于javascript - DIV容器不占用高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41995711/