Question

我有一系列10张图片（缩略图）90x45 px我想要水平列出，我设法使用inline-flex，分为两行5。问题是，当以特定大小（1024px-1180）调整窗口大小时，最后一个图像与右列重叠。我正在使用bootstrap 3.0和3-5-4设置。

我想使用一行，这样无论他们在新行中包装多少图像。

即。此

<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

：）

要包装的内嵌图像列表

1 个答案: