Question

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框。将容器设置为特定高度，并使其在垂直方向上wrap。

.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;
}

如何使第一个子框出现在中间

1 个答案: