我正在尝试使用未知高度的图像在响应式布局中垂直对齐底部(见下图)布局图像。
缩放图像以适应列的宽度,但高度会有所不同,我无法提前知道它是什么。
不幸的是,目前我最接近的是这个
我真的很想避免在可能的情况下使用javascript,因为使用媒体查询会根据屏幕宽度改变列数 - 这会使javascript变得更复杂。
我目前使用的CSS是
#catalogue-items {
@include clearfix;
margin: 40px 0;
.catalogue-item {
width: 20%;
float: left;
margin-left: 4%;
@include box-sizing(border-box);
margin-bottom: 20px;
img {
width: 100%;
}
p {
font-family: sans-serif;
font-size: 0.8em;
padding: 0.5em;
}
&:nth-child(4n + 1) {
clear:left;
}
}
}
使用媒体查询更改第n个子选择器。
有没有办法做到这一点?
答案 0 :(得分:2)
我会使用display: inline-block
HTML:
<ul>
<li>
<img width="50" height="100" src="/img/logo.png"/><br/>
Description
<li>
<li>
<img width="50" height="125" src="/img/logo.png"/><br/>
Description
<li>
<li>
<img width="50" height="75" src="/img/logo.png"/><br/>
Description
<li>
<ul>
CSS:
ul {
margin-left: -10px;
}
li {
display: inline-block;
margin: 0 10px 0 10px;
}
img {
border: 1px solid red;
}