如何使用图像链接更改每行的弹性项目数？

时间：2019-06-11 13:48:26

标签： html css

我想连续更改弹性项目的数量，但是在这种情况下，弹性项目是图像链接。因此，我将<img>标签嵌套在锚标签中。

下面是我的项目的HTML和CSS：

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 10px;
}

input[type="search"] {
  height: 40px;
  width: 80%;
  margin: 30px auto;
  border: 1px red solid;
}

.images-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  border: 1px red solid;
}

a {
  flex: 25%;
  border: 1px red solid;
}
<div class=container>

  <div class="images-container">
    <a href="https://picsum.photos/id/1/150/150" data-lightbox="image-1"><img src="https://picsum.photos/id/1/150/150" alt="Image 1"></a>
    <a href="https://picsum.photos/id/2/150/150" data-lightbox="image-2"><img src="https://picsum.photos/id/2/150/150" alt="Image 2"></a>
    <a href="https://picsum.photos/id/3/150/150" data-lightbox="image-3"><img src="https://picsum.photos/id/3/150/150" alt="Image 3"></a>
    <a href="https://picsum.photos/id/4/150/150" data-lightbox="image-4"><img src="https://picsum.photos/id/4/150/150" alt="Image 4"></a>
    <a href="https://picsum.photos/id/5/150/150" data-lightbox="image-5"><img src="https://picsum.photos/id/5/150/150" alt="Image 5"></a>
    <a href="https://picsum.photos/id/6/150/150" data-lightbox="image-6"><img src="https://picsum.photos/id/6/150/150" alt="Image 6"></a>
    <a href="https://picsum.photos/id/7/150/150" data-lightbox="image-7"><img src="https://picsum.photos/id/7/150/150" alt="Image 7"></a>
    <a href="https://picsum.photos/id/8/150/150" data-lightbox="image-8"><img src="https://picsum.photos/id/8/150/150" alt="Image 8"></a>
    <a href="https://picsum.photos/id/9/150/150" data-lightbox="image-9"><img src="https://picsum.photos/id/9/150/150" alt="Image 9"></a>
    <a href="https://picsum.photos/id/10/150/150" data-lightbox="image-10"><img src="https://picsum.photos/id/10/150/150" alt="Image 10"></a>
    <a href="https://picsum.photos/id/11/150/150" data-lightbox="image-11"><img src="https://picsum.photos/id/12/150/150" alt="Image 11"></a>
    <a href="https://picsum.photos/id/12/150/150" data-lightbox="image-12"><img src="https://picsum.photos/id/12/150/150" alt="Image 12"></a>
  </div>

</div>

这是我想要的模型：https://ibb.co/pZM4KdC

因此，正如您在我的代码中看到的那样：锚标记中的<img>不会占用全部空间。现在，我通过将锚标记的显示设置为“ block”，然后将图像的width设置为100％，来解决此问题，但是这导致了我的网页上的垂直滚动。

我想消除anchor容器右侧的多余空间，这最终会在弹性项目之间添加额外的空间。

任何可能的解决方案/说明吗？

2 个答案:

答案 0 :(得分：0)

在您的代码中添加了以下css：

.images-container img {
  width: 100%;
}

.images-container>a {
  flex: calc(100% / 3);
}

您可以通过更改flex中的.images-container>a属性来调整每行的图像数量。

这是新添加的CSS的有效代码段。

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 10px;
}

input[type="search"] {
  height: 40px;
  width: 80%;
  margin: 30px auto;
  border: 1px red solid;
}

.images-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  border: 1px red solid;
}

a {
  flex: 25%;
  border: 1px red solid;
}

.images-container img {
  width: 100%;
}

.images-container>a {
  flex: calc(100% / 3);
}
<div class=container>

  <div class="images-container">
    <a href="https://picsum.photos/id/1/150/150" data-lightbox="image-1"><img src="https://picsum.photos/id/1/150/150" alt="Image 1"></a>
    <a href="https://picsum.photos/id/2/150/150" data-lightbox="image-2"><img src="https://picsum.photos/id/2/150/150" alt="Image 2"></a>
    <a href="https://picsum.photos/id/3/150/150" data-lightbox="image-3"><img src="https://picsum.photos/id/3/150/150" alt="Image 3"></a>
    <a href="https://picsum.photos/id/4/150/150" data-lightbox="image-4"><img src="https://picsum.photos/id/4/150/150" alt="Image 4"></a>
    <a href="https://picsum.photos/id/5/150/150" data-lightbox="image-5"><img src="https://picsum.photos/id/5/150/150" alt="Image 5"></a>
    <a href="https://picsum.photos/id/6/150/150" data-lightbox="image-6"><img src="https://picsum.photos/id/6/150/150" alt="Image 6"></a>
    <a href="https://picsum.photos/id/7/150/150" data-lightbox="image-7"><img src="https://picsum.photos/id/7/150/150" alt="Image 7"></a>
    <a href="https://picsum.photos/id/8/150/150" data-lightbox="image-8"><img src="https://picsum.photos/id/8/150/150" alt="Image 8"></a>
    <a href="https://picsum.photos/id/9/150/150" data-lightbox="image-9"><img src="https://picsum.photos/id/9/150/150" alt="Image 9"></a>
    <a href="https://picsum.photos/id/10/150/150" data-lightbox="image-10"><img src="https://picsum.photos/id/10/150/150" alt="Image 10"></a>
    <a href="https://picsum.photos/id/11/150/150" data-lightbox="image-11"><img src="https://picsum.photos/id/12/150/150" alt="Image 11"></a>
    <a href="https://picsum.photos/id/12/150/150" data-lightbox="image-12"><img src="https://picsum.photos/id/12/150/150" alt="Image 12"></a>
  </div>

</div>

答案 1 :(得分：0)

我认为您正在寻找的是CSS网格：

* {
  box-sizing: border-box;
}

input[type="search"] {
  height: 40px;
  width: 80%;
  margin: 30px auto;
  border: 1px red solid;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px red solid;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<div class="grid-container">
   <div class="grid-item">
    <a href="https://picsum.photos/id/1/150/150" data-lightbox="image-1"><img src="https://picsum.photos/id/1/150/150" alt="Image 1"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/2/150/150" data-lightbox="image-2"><img src="https://picsum.photos/id/2/150/150" alt="Image 2"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/3/150/150" data-lightbox="image-3"><img src="https://picsum.photos/id/3/150/150" alt="Image 3"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/4/150/150" data-lightbox="image-4"><img src="https://picsum.photos/id/4/150/150" alt="Image 4"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/5/150/150" data-lightbox="image-5"><img src="https://picsum.photos/id/5/150/150" alt="Image 5"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/6/150/150" data-lightbox="image-6"><img src="https://picsum.photos/id/6/150/150" alt="Image 6"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/7/150/150" data-lightbox="image-7"><img src="https://picsum.photos/id/7/150/150" alt="Image 7"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/8/150/150" data-lightbox="image-8"><img src="https://picsum.photos/id/8/150/150" alt="Image 8"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/9/150/150" data-lightbox="image-9"><img src="https://picsum.photos/id/9/150/150" alt="Image 9"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/10/150/150" data-lightbox="image-10"><img src="https://picsum.photos/id/10/150/150" alt="Image 10"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/11/150/150" data-lightbox="image-11"><img src="https://picsum.photos/id/12/150/150" alt="Image 11"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/12/150/150" data-lightbox="image-12"><img src="https://picsum.photos/id/12/150/150" alt="Image 12"></a>
	</div>
  </div>

来源：https://www.w3schools.com/css/css_grid.asp 您可以相应地更改填充以更改图像之间的距离。

相关问题
最新问题