缩放变换时，列中的 CSS 元素位于上边框下方

Question

我使用了 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>

Answer 1

您可以切换到 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

Answer 2

我认为这些列的问题是浏览器“感到困惑”，并认为非第一张图像位于下方。

我发现了完成这项工作的两种可能性，第一个是我最喜欢的：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。