Html 要换行的内联图像列表_Html_Css_Image_Twitter Bootstrap

Html 要换行的内联图像列表

html css image twitter-bootstrap

Html 要换行的内联图像列表,html,css,image,twitter-bootstrap,Html,Css,Image,Twitter Bootstrap,我有一系列的10个图像（缩略图），90x45px，我想水平列出，我通过使用内联flex，将它们分成两行，每行5个。问题是，当以特定大小（1024px-1180）调整窗口大小时，最后一个图像与右列重叠。我使用的是3-5-4设置的Bootstrap3.0 我想使用一行，这样无论有多少图像，他们将包装在新的一行 i、 e。这个多谢各位编辑由于LOTUSMS示例，我的解决方案将上述css更改为 .fz-thumbnails-ul { list-style: none; paddin

我有一系列的10个图像（缩略图），90x45px，我想水平列出，我通过使用内联flex，将它们分成两行，每行5个。问题是，当以特定大小（1024px-1180）调整窗口大小时，最后一个图像与右列重叠。我使用的是3-5-4设置的Bootstrap3.0

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

i、 e。这个

多谢各位

编辑由于LOTUSMS示例，我的解决方案将上述css更改为

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

在某些类清理和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>

这是你的电话号码

：）

请添加一个我们可以使用的工作代码段。上面的代码清单没有显示这个问题。谢谢。你说的工作是什么意思，我可以发布整个列表吗？我编辑了整个列表和列。这就是我的意思，正如你所看到的，代码没有显示你在问题中提到的问题。请更新小提琴，使其显示问题，保存并发布其链接。你能用更简单的形式模拟它吗？我为你建立了这个代码笔，但因为我不确定这是否回答了你的问题，我会把它贴在这里。如果有，我会把它移到答案，这样你就可以标记它，如果没有，那么让我知道从那里去哪里。谢谢；）-该死的，我以为我可以提高投票率，但它仍然告诉我，我需要获得更高的声誉。对不起，没问题。：）我想你还是可以核对一下答案。但是很酷。很高兴我帮了你。谢谢，我完全没有注意到你需要点击复选标记，现在它被标记为答案。

<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>

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

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

<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>

.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;
}