[英]Vertical alignment of responsive images of unknown height using CSS
我正在嘗試將圖像垂直對齊底部(見下圖)布置在響應式布局中,圖像高度不明。
縮放圖像以適應列的寬度,但高度變化,我無法提前知道它是什么。
不幸的是,目前我最接近的是這個
我真的很想避免在可能的情況下使用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個子選擇器。
有沒有辦法做到這一點?
我會用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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.