将产品图片放在盒子底部
place product image at bottom of the box
我希望图像在框的底部对齐。会有来自后端的产品图片,没有固定尺寸。
HTML
<ul>
<li><img src="http://img3.wikia.nocookie.net/__cb20120422063108/nickelodeon/images/2/27/Spongebob1.gif" alt="" /></li>
<li>
<img src="http://img2.wikia.nocookie.net/__cb20120717231330/hulksmash/images/7/78/Image_placeholder.jpg" alt="" />
</li>
</ul>
CSS
ul {
list-style: none;
}
li {
float: left;
width: 276px;
text-align: center;
border:1px solid #ccc;
height: 276px;
margin: 5px
}
img {
vertical-align: bottom
}
你可以给李加一个line-height
属性 和李的高度一样,这样应该就可以了。
这个css成功了
ul {
list-style: none;
}
li {
width: 276px;
text-align: center;
border:1px solid #ccc;
height: 276px;
margin: 5px
vertical-align: bottom;
display: table-cell;
vertical-align: bottom;
}
img {
vertical-align: bottom
}
这是一种方法。
li {
position:relative;
}
img {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
}
我希望图像在框的底部对齐。会有来自后端的产品图片,没有固定尺寸。
HTML
<ul>
<li><img src="http://img3.wikia.nocookie.net/__cb20120422063108/nickelodeon/images/2/27/Spongebob1.gif" alt="" /></li>
<li>
<img src="http://img2.wikia.nocookie.net/__cb20120717231330/hulksmash/images/7/78/Image_placeholder.jpg" alt="" />
</li>
</ul>
CSS
ul {
list-style: none;
}
li {
float: left;
width: 276px;
text-align: center;
border:1px solid #ccc;
height: 276px;
margin: 5px
}
img {
vertical-align: bottom
}
你可以给李加一个line-height
属性 和李的高度一样,这样应该就可以了。
这个css成功了
ul {
list-style: none;
}
li {
width: 276px;
text-align: center;
border:1px solid #ccc;
height: 276px;
margin: 5px
vertical-align: bottom;
display: table-cell;
vertical-align: bottom;
}
img {
vertical-align: bottom
}
这是一种方法。
li {
position:relative;
}
img {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
}