Question

我负责转换的一些布局使用了以下布局（参见图片。）我想知道使用CSS的最佳方法是相应地渲染图像列表。我不想将项目分成不同的行容器，只是为了使事情适合。我确信有一种方法可以创建这个列表。

我遇到的最大问题是渲染具有适当边距的图像，并使最右边的图像与布局容器的边缘对齐（橙色线条。）

理想情况下，我想将html保持为：

<ul class="gallery-list">
    <li class="gallery-list-item">
        <img src="..." alt="..." />
    </li>
    <li class="gallery-list-item">
        <img src="..." alt="..." />
    </li>
</ul>

感谢您的时间，如果有更好的解决方案，我很乐意关闭它并链接到解决方案。

Answer 1

这可能是一种解决方案，也可能不是。它做了一些假设，例如每行总是有四个图像，但使它们响应。

要点是：

我们将图像容器宽度设置为父容器的百分比，以控制每行的图像数。
我们在ul上使用右边距，以抵消应用于图片间距li的右边距。
我们使用calc减去我们用于间距的边距，这样所有元素都可以放在一条线上而不会开始重排。

我使用了几个媒体查询来展示如何更改较小屏幕的行数以使网格响应。

还有一些填充和边框应用于.container，以证明图像占据了容器的整个宽度。

这只是一种做事方式。

body {
  margin: 0;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container {
  width: 80%;
  margin: 50px auto;
  /* following adding for demo purposes */
  padding: 50px 0;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  overflow: hidden;
}
ul {
  margin-right: -5px;
}
li {
  float: left;
  margin: 0 5px 5px 0;
  width: calc( 50% - 5px );
}
img {
  display: block;
  width: 100%; /* or max-width: 100%; */
  height: auto;
}
@media( min-width: 550px ) {
  li {
    width: calc( 33.333% - 5px );
  }
}
@media( min-width: 750px ) {
  li {
    width: calc( 25% - 5px );
  }
}

<div class="container">
  <ul>
    <li>
      <img src="http://placehold.it/200x200/fc0/&text=1">
    </li>
    <li>
      <img src="http://placehold.it/200x200/ccc/&text=2">
    </li>
    <li>
      <img src="http://placehold.it/200x200/fc0/&text=3">
    </li>
    <li>
      <img src="http://placehold.it/200x200/ccc/&text=4">
    </li>
    <li>
      <img src="http://placehold.it/200x200/fc0/&text=5">
    </li>
    <li>
      <img src="http://placehold.it/200x200/ccc/&text=6">
    </li>
    <li>
      <img src="http://placehold.it/200x200/fc0/&text=7">
    </li>
    <li>
      <img src="http://placehold.it/200x200/ccc/&text=8">
    </li>
  </ul>
</div>

Answer 2

你可以通过很多方式解决这个问题。我偏爱flexbox - 这个例子在画廊上以固定的宽度显示它，但你也可以使用流畅的。我建议您阅读一些关于flexbox的内容，但这是一个起点：

＆＃13;

.gallery {
  display: flex;
  flex-wrap: wrap;
  width: 440px;
  margin: auto;
  padding: 0;
  list-style: none;
}


.gallery img {
  margin-right: 10px;
  margin-bottom: 10px;
}

＆＃13;

<ul class="gallery">
  <li>
    <img src="//placehold.it/100x100" alt="Artwork">
  </li>
  <li>
    <img src="//placehold.it/100x100" alt="Artwork">
  </li>

  <li>
    <img src="//placehold.it/100x100" alt="Artwork">
  </li>

  <li>
    <img src="//placehold.it/100x100" alt="Artwork">
  </li>

  <li>
    <img src="//placehold.it/100x100" alt="Artwork">
  </li>

  <li>
    <img src="//placehold.it/100x100" alt="Artwork">
  </li>

  <li>
    <img src="//placehold.it/100x100" alt="Artwork">
  </li>

  <li>
    <img src="//placehold.it/100x100" alt="Artwork">
  </li>

  <li>
    <img src="//placehold.it/100x100" alt="Artwork">
  </li>

  <li>
    <img src="//placehold.it/100x100" alt="Artwork">
  </li>

</ul>

＆＃13;

Answer 3

你也可以使用display：flex和flex-wrap来实现这个

我已经将标记从ul li改为div和img's，我让每一行的最后一个图像增长并适合容器

检查此代码段

.gallery-list-item {
  display: flex;
  width: 100%;
  margin-top: 10px;
}
div img:not(:first-child) {
  margin-left: 10px;
}
div.gallery-list-item img:last-child {
  flex: 1;
}
div.gallery-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 450px;
  border: 1px solid black;
  padding: 0;
}

<div class="gallery-list">
  <div class="gallery-list-item">
    <img src="http://shushi168.com/data/out/123/36699123-images.png" alt="..." height=100 width=100/>


    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>

    <img src="http://shushi168.com/data/out/123/36699123-images.png" alt="..." height=100 width=100/>

    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
  </div>
  <div class="gallery-list-item">
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>

    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>

    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>

    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
  </div>

</div>

希望有所帮助

CSS需要有关图库布局的提示

3 个答案: