html - 要包装的内联图像列表

Question

我有一系列 10 张图像(缩略图)90x45 像素，我想水平列出，我设法通过使用 inline-flex，分成两行，每行 5 张。问题是当以特定尺寸 (1024px-1180) 调整窗口大小时，最后一张图像与右列重叠。我正在使用 3-5-4 设置的 bootstrap 3.0。

我想使用一行，这样无论有多少图像它们都会换行。

即这个

<div>
img1-img2-img3-img4-img5-img6-img7-img8-img9-img10-img11...
</div>

会变成

<div>
img1-img2-img3-img4-
img5-img6-img7-img8-
img9-img10-img11...
</div>

这是我现在拥有的

<div class="col-xs-12 col-md-3">
content
</div>
<div class="col-xs-12 col-md-5">
<div class="row">
    <div class="col-xs-12">
        <ul class="fz-thumbnails-ul">
            <li>
                <div class="fz-intro-link">
                <a class="fz-thumbnail-links fz-nav-link fz-first-link" href="#item-1a">
                <div class="fz-hover-slide">
                <img class="img-responsive" src="image1.jpg" />
                </div>
                <img class="img-responsive" src="image1.jpg" />
                </a>
                </div>
            </li>
            <li>
                <div class="fz-intro-link">
                <a class="fz-thumbnail-links fz-nav-link" href="#item-2a">
                <div class="fz-hover-slide">
                <img class="img-responsive" src="image2.jpg" />
                </div>
                <img class="img-responsive" src="image2.jpg" />
                </a>
                </div>
            </li>
            <li>
                <div class="fz-intro-link">
                <a class="fz-thumbnail-links fz-nav-link" href="#item-3a">
                <div class="fz-hover-slide">
                <img class="img-responsive" src="image3.jpg" />
                </div>
                <img class="img-responsive" src="image3.jpg" />
                </a>
                </div>
            </li>
            <li>
                <div class="fz-intro-link">
                <a class="fz-thumbnail-links fz-nav-link" href="#item-4a">
                <div class="fz-hover-slide">
                <img class="img-responsive" src="image4.jpg" />
                </div>
                <img class="img-responsive" src="image4.jpg" />
                </a>
                </div>
            </li>
            <li>
                <div class="fz-intro-link">
                <a class="fz-thumbnail-links fz-nav-link" href="#item-5a">
                <div class="fz-hover-slide">
                <img class="img-responsive" src="image5.jpg" />
                </div>
                <img class="img-responsive" src="image5.jpg" />
                </a>
                </div>
            </li>
            <li>
                <div class="fz-intro-link">
                <a class="fz-thumbnail-links fz-nav-link" href="#item-6a">
                <div class="fz-hover-slide">
                <img class="img-responsive" src="image6.jpg" />
                </div>
                <img class="img-responsive" src="image6.jpg" />
                </a>
                </div>
            </li>
        </ul>
    </div>
</div>
</div>
<div class="col-xs-12 col-md-4">
    content
</div>

当然，该列表包含与图像一样多的元素。我拥有的相关(我认为)CSS 是这个

.fz-thumbnails-ul {
  display: inline-flex;
  list-style: none;
  margin-bottom: 3px;
  padding: 0;
}
.fz-thumbnails-ul > li {
  margin: 0 3px 0 0;
}

谢谢

编辑我的解决方案感谢 LOTUSMS 示例，将上面的 css 更改为此

.fz-thumbnails-ul  {
  list-style: none;
  padding: 0;
}
.fz-thumbnails-ul li {
  display: inline-flex;
  margin: 0 3px 0 0;
}

Answer 1

在一些类清理和 CSS 重组之后，如果您遵循此指南并进行相应修改，您的解决方案将起作用:

HTML

<div class="container">
    <div class="col-xs-12 col-md-3 left">
        content
    </div>
    <div class="col-xs-12 col-md-5 center">
        <div class="row">
            <div class="col-xs-12">
                <div class="fz-intro-link">
                    <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/Lough-Leane-Nov-opt-pano-II%20wmark_90x0.jpg" />
                    <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/Lough-Leane-Nov-opt-pano-II%20wmark_90x0.jpg" />
                    <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/Lough-Leane-Nov-opt-pano-II%20wmark_90x0.jpg" />
                    <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/Lough-Leane-Nov-opt-pano-II%20wmark_90x0.jpg" />
                    <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/Lough-Leane-Nov-opt-pano-II%20wmark_90x0.jpg" />
                    <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/Lough-Leane-Nov-opt-pano-II%20wmark_90x0.jpg" />
                    <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/Lough-Leane-Nov-opt-pano-II%20wmark_90x0.jpg" />
                    <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/Lough-Leane-Nov-opt-pano-II%20wmark_90x0.jpg" />
                    <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/Lough-Leane-Nov-opt-pano-II%20wmark_90x0.jpg" />
                    <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/Lough-Leane-Nov-opt-pano-II%20wmark_90x0.jpg" />
                </div>
            </div>
        </div>
    </div>

    <div class="col-xs-12 col-md-4 right">
        content
    </div>
</div>

CSS

.fz-intro-link img {
  display: inline-flex;
  list-style: none;
  margin-bottom: 3px;
  padding: 0;
  margin: 5px 9px;
}
.left{
    background:green;
}
.center{
    background:blue;
}
.right{
    background:orange;
}

这是 DEMO

:)