我在一个水平放置的 div 中有 3 张图像。当我调整页面大小时,图像会改变它们的位置并垂直对齐 float 。我希望页面响应,当我调整页面大小时,我希望整个 div 都进行调整和调整大小。我还需要在页面中放入其他 div 和其他图像。我希望图像在底部对齐。有人帮我吗? 这是代码示例。
.box{
display: inline-block;
position: relative;
bottom:100%;
width: 100%;
margin: 5% 5% 0 0;
font-size: 12px;
}
.box:before{
content: "";
display: block;
padding-top: 100%;
}
img {
max-width:100%;
height:auto;
border:1px solid black;
text-align:center;
}
.content{
/* Positioning */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* Styling */
border:1px solid;
padding: 30px;
text-align: center;
vertical-align: center;
text-transform: uppercase;
color: #fff;
}
<div class="box">
<div class="content">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
</div>
</div>
强文本
最佳答案
只需将此添加到 img
:
参见 fiddle https://jsfiddle.net/16q2xr8k/27/
img {
width: calc((100% / 3) - 2px);
height: auto;
border: 1px solid black;
text-align: center;
}
关于html - 带有图像的响应式 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34906636/