通过 CSS 在 Div 中均匀和水平分布图像答案

【问题标题】：Distributing images evenly & horizontally in a Div via CSS通过 CSS 在 Div 中均匀和水平分布图像
【发布时间】：2016-05-27 03:56:57
【问题描述】：

我很难为我的案件找到具体信息。我想在一个 940px 的 div 中分配 3 个图像缩略图，以便与我的其余内容对齐。到目前为止，我已经让图像水平排列，但间距已关闭，所有内容都向左移动。

这是我的 CSS：

#thumbs {   
  width: 940px;
  margin-top:90px;
  margin-left: auto; 
  margin-right: auto;
}

我的 HTML：

<div id="thumbs">
  <a id="single_image" href="/dev/images/1.png">
    <img src="/dev/images/thumb1.png" alt=""/>
  </a>
  <a id="single_image" href="/dev/images/2.png">
    <img src="/dev/images/thumb2.png" alt=""/>
  </a>
  <a id="single_image" href="/dev/images/3.png">
    <img src="/dev/images/thumb3.png" alt=""/>
  </a>
</div>

示例图片

我目前拥有的：

我想要达到的目标：

非常感谢您的帮助。

【问题讨论】：

每个a 元素都有相同的ID。 ID 应该是唯一的。

标签： css html

【解决方案1】：

在这里使用我的答案中显示的技术：Fluid width with equally spaced DIVs

这是您的代码：http://jsfiddle.net/thirtydot/JTcGZ/

CSS：

#thumbs {   
    width: 540px;
    margin-top:90px;
    margin-left: auto; 
    margin-right: auto;

     text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#thumbs a {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

HTML：

<div id="thumbs">
    <a id="single_image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <span class="stretch"></span>
</div>

【讨论】：

稍加剪裁，您的代码就可以工作了！ #thumb 宽度：有点偏离，我将其更改为 940px，另外，在 #thumbs a 上，需要将“*display”行更正为“display”（仅供未来读者使用）非常感谢！
我很高兴它对你有用。我将940px 更改为540px 只是为了使它更容易适应jsFiddle 窗口。 *display 是制作display: inline-block work in IE7 的一部分。如果不需要支持 IE7，可以放心删除*display: inline; zoom: 1;。最后，如果我的回答是你想要的，你能accept it吗？
其实因为a是一个内联元素，你大概可以去掉整个#thumbs a { .. }规则。
缺点是每个inline-block之间必须有空格，最后一个和父元素的结束标签之间不能有空格。
@Ali 感谢提示，需要有一个每个元素之间。在看到那条评论之前，我浪费了太多时间。三十点，您可能想在回答中提及这一点。

【解决方案2】：

答案很简单，用：

.container {
    display: flex;
    justify-content:space-between;
}

就是这样！

【讨论】：

很好的解决方案。当您需要响应式图像时也可以使用。
不起作用 - OPs HTML 标记中不存在 .container

【解决方案3】：

有一个干净的解决方案：

http://radiatingstar.com/distribute-divs-images-equaly-line

#container {
    text-align: justify;
}
#container > div {
    width: 100px; /* Declare your value. Can be in relative units. */
    display: inline-block;
    vertical-align: top;
}
#container:after {
    content: "";
    width: 100%;
    display: inline-block;
}

【讨论】：

我认为被低估的答案。我都试过了，这个非常干净而且非常有效。唯一的问题是：假设我有两行和 7 个缩略图，第一行将均匀显示 5 个缩略图，第二行将显示两个在极端位置发送的缩略图，该行的中间完全是空的，这会破坏它一点点。如果第二行中的最后两个缩略图与左侧（或右侧）对齐，那将是完美的。即使是经典画廊，您的解决方案也是如此……
奇怪的是，这个解决方案对空格敏感，至少在 Linux 下的 Firefox 42.0 和 Chrome 46 中是这样。请参阅 jsfiddle.net/3fxjxay6 与 jsfiddle.net/r97umtdw 抓头！

【解决方案4】：

尝试添加

位置：相对；文本对齐：居中；

在#thumbs 中，并在#thumbs 中为（或img）设置宽度和边距。

类似这样，测试各种值：

#thumbs a {
  width: 25%;
  margin: 0 4%;
  text-align:center;
}

【讨论】：

【解决方案5】：

text-align: justify; 的缺点是每两个 inline-block 元素之间必须有空格，否则这两个元素会相互粘连。

您可以在此处检查此行为： http://jsfiddle.net/JTcGZ/1552/

实现这一点的新现代方法是使用 flex。

#thumbs {   
    display: flex;
    justify-content: space-between // flex-start | flex-end | center | space-around;
    align-items: stretch // flex-start | flex-end | center | baseline;
}
#thumbs a {
    display: inline-block;
}

您还可以在现代浏览器中定义百分比宽度：

#thumbs a {
    width: calc((100% / 3) - 10px);
}

请访问此页面以获取有关 flex 布局的更多详细信息：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

由于某种原因，top 方法拉伸了我的图像的垂直高度？
@GeorgeEdwards 其实这是 flex 布局的一个很棒的功能，可以将所有项目拉伸到相同的高度，但是您可以使用 flex 容器的 align-items 样式来控制它，只需将其设置为 flex-start ！我更新了答案。

【解决方案6】：

为什么不将包装 id div thumbs 用作顶部填充为 90px 的容器，而其他内部元素使用一个简单的类（不是 id，所以它可以重用），所有的都是浮动的。这样它们可以完美地水平对齐，并且包装容器也提供了您正在寻找的边距。您还将使用少得多的代码来完成您想要的。

【讨论】：