css - 如何让第一个子框出现在中间

Question

这是 js fiddle .

HTML

<div class="container">

  <div class="tiles-slider-wrapper">
    <ul class="tiles-slider">
      <li><img src="img/slider/1.jpg" alt="image"></li>
      <li><img src="img/slider/2.jpg" alt="image"></li>
      <li><img src="img/slider/3.jpg" alt="image"></li>
      <li><img src="img/slider/4.jpg" alt="image"></li>
      <li><img src="img/slider/5.jpg" alt="image"></li>
    </ul>
  </div>

CSS

.tiles-slider {
   padding: 0;
   list-style-type: none;
   overflow: auto;
   margin-bottom: 0;
   background: #000;
}

.tiles-slider li {
   width: 25%;
   float: left;
   -webkit-transition: transform .3s ease-in-out;
   -moz-webkit-transition: transform .3s ease-in-out;
   transition: transform .3s ease-in-out;
}

.tiles-slider img {
    width: 100%;
}
/* this dictates the size of the boxes*/
.tiles-slider li:first-child {
   width: 50%;
}
/*.tiles-slider li:nth-child(2) {
   width: 50%;
}*/
.shrink-tile {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
   transform: scale(0.5);

}

.tiles-slider li:first-child.shrink-tile {
  -webkit-transform: scale(0.25);
  -moz-transform: scale(0.25);
   transform: scale(0.25);
}   

我只想让图像在中间看起来更大。所以左边是两张图片，右边是两张图片，中间是一张大图片。我尝试将 nth:child 更改为 2、3、4 甚至 5。它不断添加列和行，但没有成为我想要的。希望有人能提供帮助。谢谢

Answer 1

如果这是你想要的？ http://jsfiddle.net/9u1Ld12u/1/

因为你想要中间的图片，它会是第三张图片，使用nth-of-type选择器来设置宽度

.tiles-slider li:nth-of-type(3) {
   width: 50%;
}

为了让两张图片在左边，一张在中间，然后两张在右边，我能想到的最简单的方法是使用 flex 框。将容器设置到一定高度，并使其在垂直方向包裹。

.tiles-slider {
    padding: 0;
    list-style-type: none;
    overflow: auto;
    margin-bottom: 0;
    background: #000;

    display: flex;
    flex-direction: column;
    height: 300px;
    flex-wrap: wrap;
    justify-content: center;
}