Question

我使用非常简单的列布局，其列宽等于内部图像的宽度。问题是，即使使用column-gap：0，当父容器不是图像宽度的精确倍数时，在列之间仍然存在间隙，因为列是“散布”在容器的整个宽度上而不是被压入就像我想要的那样。

以下是显示我的问题的小提琴：https://jsfiddle.net/GaetanL/q16ja0mx/3/

* {
  margin: 0;
  padding: 0;
}

img {
  width: 100px;
}

.wrapper {
  background-color: red;
}

.group {
  column-width: 100px;
  column-gap: 0px;
  text-align: center;
}

.container {
  width: 450px;
  background-color: blue;
}

<div class="container">
  <div class="group">
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://i.pinimg.com/originals/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></div>
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://s.w.org/plugins/geopattern-icon/random-post-for-widget.svg"></div>
    <div class="wrapper"><img src="https://images.theconversation.com/files/135969/original/image-20160830-26282-1tt17ym.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip"></div>
    <div class="wrapper"><img src="https://www.dumpaday.com/wp-content/uploads/2018/06/random-pictures-10.jpg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRYkflEQWLH5gOAEChBRsN0R11n1by_3c24sJRAcGumVARrZ1-k&usqp=CAU"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSRKJI1Jhsk6iHIUEdgpL2z5USE6S0B54iBIEUU76r1PHYL1_GV&usqp=CAU"></div>
    <div class="wrapper"><img src="https://miro.medium.com/max/11796/1*IC7_pdLtDMqwoqLkTib4JQ.jpeg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRN0TyKB-bciZuiyX5ZzJyKGhLSjAPh-ZrUkhr6WJXJzY0qkteE&usqp=CAU"></div>
  </div>
</div>

Answer 1

您可以使用CSS网格解决此问题，可以在其中考虑使用repeat(auto-fit, column_width);，然后使您的元素跨越所有列：

img {
  width: 100%;
  display:block; /* remove space between images */
}

.wrapper {
  background-color: red;
  /*display:flex use this to remove all the spaces*/
}

.group {
  column-width: var(--c);
  column-gap: 0px;
  text-align: center;
  grid-column: 1/-1; /* take all the columns*/
}

.container {
  --c:100px; /* column width*/

  width: 450px;
  background-color: blue;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--c));
  justify-content: center;
  
  /*for the demo, resize and see the result */
  overflow:hidden;
  resize:horizontal;
}

<div class="container">
  <div class="group">
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://i.pinimg.com/originals/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></div>
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://s.w.org/plugins/geopattern-icon/random-post-for-widget.svg"></div>
    <div class="wrapper"><img src="https://images.theconversation.com/files/135969/original/image-20160830-26282-1tt17ym.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip"></div>
    <div class="wrapper"><img src="https://www.dumpaday.com/wp-content/uploads/2018/06/random-pictures-10.jpg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRYkflEQWLH5gOAEChBRsN0R11n1by_3c24sJRAcGumVARrZ1-k&usqp=CAU"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSRKJI1Jhsk6iHIUEdgpL2z5USE6S0B54iBIEUU76r1PHYL1_GV&usqp=CAU"></div>
    <div class="wrapper"><img src="https://miro.medium.com/max/11796/1*IC7_pdLtDMqwoqLkTib4JQ.jpeg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRN0TyKB-bciZuiyX5ZzJyKGhLSjAPh-ZrUkhr6WJXJzY0qkteE&usqp=CAU"></div>
  </div>
</div>

CSS避免容器中的列“传播”

1 个答案: