我使用了 4 列圖像column-count，我希望它們在鼠標懸停時縮放。第一列工作正常，但接下來的三列在轉換時將位于上邊框下方。我嘗試了各種邊距和填充，也嘗試過，z-index但沒有成功。這是JSFiddle 的實時直播代碼：.content{ margin-top: 20px; background-color: black;}.photos img { margin-bottom: 10px; vertical-align: middle; height: auto; width: 100%;}.photos { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px;}li img { -webkit-transition: 0.2s;}li img:hover { -webkit-transition: .5s; transform: scale(1.3);}<div class="content"> <ul class="photos"> <li> <img src="https://syndlab.com/files/view/5db9b150252346nbDR1gKP3OYNuwBhXsHJerdToc5I0SMLfk7qlv951730.jpeg"> </li> <li> <img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ"> </li> <li> <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg"> </li> <li> <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg"> </li> </ul></div>
2 回答
慕娘9325324
TA貢獻1783條經驗 獲得超4個贊
您可以切換到 Flexbox 并毫無問題地實現相同的行為。
只需像這樣調整 CSS：
.photos {
? ? display: flex;
}
li {
? width: 25%;
}
這是一個正在運行的 Codepen：https://codepen.io/alezuc/pen/jObWjLm
更新：
好吧，如果你想實現你在下面評論中發布的內容，我建議你轉向純 CSS Mansory 方法。代碼如下：刪除列管理和列表（ul/li）并使用 div：
<div class="content">
? ?<div class="item">
? ? ? <img src="https://placehold.it/600x620.jpg">
? ?</div>
? ?<div class="item">
? ? ? <img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ">
? ?</div>
? ?<div class="item">
? ? ? <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
? ?</div>
? ?<div class="item">
? ? ? <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
? ?</div>
? ?<div class="item">
? ? ? <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
? ?</div>
? ?<div class="item">
? ? ? <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
? ?</div>
? ?<div class="item">
? ? ? <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
? ?</div>
? ?<div class="item">
? ? ? <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
? ?</div>
? ?<span class="item break"></span>
? ?<span class="item break"></span>
? ?<span class="item break"></span>
</div>
這是 CSS 代碼：
.content {
? background-color: black;
? display: flex;
? flex-flow: column wrap;
? align-content: space-between;
? /* Your container needs a fixed height, and it?
? ?* needs to be taller than your tallest column. */
? height: 960px;
??
? /* Optional */
? padding: 0;
? width: 100%;
? margin: 40px auto;
? counter-reset: items;
}
.item {
? width: 24%;
? /* Optional */
? position: relative;
? margin-bottom: 1%;
}
/* Re-order items into 3 rows */
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)? ?{ order: 4; }
/* Force new columns */
.break {
? flex-basis: 100%;
? width: 0;
? margin: 0;
? content: "";
? padding: 0;
}
img {
? max-width: 100%;
? height: auto;
? transition: 0.2s;
}
img:hover {
? ? transition: .5s;
? ? transform: scale(1.12);
}
這是正在運行的 Codepen：https ://codepen.io/alezuc/pen/MwayKaq
米琪卡哇伊
TA貢獻1998條經驗 獲得超6個贊
我認為這些列的問題是瀏覽器“感到困惑”，并認為非第一張圖像位于下方。
我發現了完成這項工作的兩種可能性，第一個是我最喜歡的：display: flex;
.content{
? ? margin-top: 50px;
? ? background-color: black;
}
.photos img {
? ? margin-bottom: 10px;
? ? vertical-align: middle;
? ? height: auto;
? ? width: 100%;
}
.photos {
? ? padding: 0;
? ? list-style: none;
? ? display: flex;
}
.photos li{
? flex-basis: 25%;
? padding: 0 5px;
? margin: 0;
}
li img {
? ? -webkit-transition: 0.2s;
}
li img:hover {
? ? -webkit-transition: .5s;
? ? transform: scale(1.12);
}
<div class="content">
? ? <ul class="photos">
? ? ? ? <li>
? ? ? ? ? ? <img src="https://syndlab.com/files/view/5db9b150252346nbDR1gKP3OYNuwBhXsHJerdToc5I0SMLfk7qlv951730.jpeg">
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ">
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
? ? ? ? </li>
? ? </ul>
</div>
使用列設置的其他可能性是圍繞添加position: absolute到.photos img或float: left到.photos。
- 2 回答
- 0 關注
- 200 瀏覽
添加回答
舉報
0/150
提交
取消