使用 css 的灵活缩略图网格答案

【问题标题】：Flexible thumbnail grid with css使用 css 的灵活缩略图网格
【发布时间】：2013-12-16 09:52:18
【问题描述】：

我正在尝试在屏幕上放置缩略图，甚至使用“填充”。这是说明问题的图片：

<!DOCTYPE html>
<html>
<head>
<title>Test rows</title>

<style type="text/css">

    body {
        background: #121212;
        color: #fff;
    }

    #Container {
        background: #585858;
        margin: 0 auto;
        min-width: 1024px;
        width: 85%;
        margin-top: 50px;

        text-align: justify;
        -ms-text-justify: distribute-all-lines;
        text-justify: distribute-all-lines;
    }

    #Container a {
        vertical-align: top;
        display: inline-block;
        *display: inline;
        zoom: 1;
    }

    .stretch {
        width: 100%;
        display: inline-block;
        font-size: 0;
        line-height: 0;
    }




</style>
</head>

<body>

<div id="Container">

<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<span class="stretch"></span>

</div>




</body>
</html>

我在 stackoverflow 中做了一些研究，发现了一些有用的代码可以开始，但我面临一些问题。当您看到图像时，最后一行中的图像较少时，我希望图像从左到右对齐，而不是“对齐”到容器的边框。

我还想让行之间的“垂直间距”等于图像之间的水平间距，现在我有一些垂直间距，比如“3px”，我不确定来自哪里。如果需要，我愿意接受 js 解决方案。谢谢

【问题讨论】：

跳过text-justify: distribute-all-lines; ? text-align: justify; 的默认行为是左对齐最后一行 iirc
但这不会像我在第一行那样在水平空间中均匀分布图像。

标签： html css

【解决方案1】：

LIKE THIS 对你有用吗？

这是基于我建议您阅读的here on SO 提供的答案以及this one- 也基于它。这证明子元素。

HTML

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <span class="stretch"></span>
</div>

CSS

#container {

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */

}

.box {
    width: 150px;
    height: 125px;
    background:#ccc;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    margin:10px;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

或者，如果您希望子项对齐而不是从左到右对齐，请查看this fiddle ，基于this answer on SO

HTML

<div class="container">
   <div>Box1</div>
   <div>Box2</div>
   <div>Box3</div>
   <div>Box4</div>
   <div>Box5</div>
   <div>Box6</div>
   <div>Box7</div>
   <div>Box8</div>
   <div>Box9</div>
   <div>Box10</div>
   <div>Box11</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
.container {
  overflow: auto;
  display: block;
}
.container > div {
  margin: 20px;
  width: 150px;
  height: 100px;
  background: blue;
  float: left;
  color: #fff;
  text-align: center;
}

【讨论】：

嘿，该代码有同样的问题，即捕捉框并且在最后一行中没有将它们从左到右对齐。还是谢谢
我还更新了答案以包括从左到右对齐作为对齐的替代方法
看看我在问题中发布的图像，其中有一个带有箭头指向的红色轮廓。在最后几行中，我希望它们填充“下一个可用空间”。
谢谢，我刚看到更新。好吧，它可以工作，但是当我改变盒子的宽度和高度时，一切都搞砸了。当我改变盒子的大小时，我需要改变其他东西吗？谢谢
好的，您在答案中发布的替代方案效果很好。但我需要图像仍然“拉伸”到 div 容器的 100% 大小。通过这种替代方式，我在右侧有很多可用空间。右侧的最后一个图像/框应完全“浮动”到右侧。不确定是否可能。

【解决方案2】：

您不需要text-align: justify; CSS 规则 http://jsfiddle.net/2ngCS/

【讨论】：

我相信OP希望盒子均匀分布，请参阅问题的第一行。
没错，我想均匀分布图像。