33

我很难为我的案件找到具体信息。我想在一个 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>

示例图像

我目前拥有的：

在此处输入图像描述

我想要达到的目标：

在此处输入图像描述

非常感谢您的帮助。

4

6 回答 6

47

使用我在此处的答案中显示的技术：具有等间距 DIV 的流体宽度

这是您的代码：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>​
于 2012-05-12T18:43:13.657 回答
34

答案很简单，只需使用：

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

就这样！

于 2016-05-26T19:56:57.563 回答
30

有一个干净的解决方案：

http://radiatingstar.com/distribute-divs-images-equally-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;
}
于 2014-04-01T07:38:08.917 回答
3

尝试添加

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

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

像这样，测试各种值：

#thumbs a {
  width: 25%;
  margin: 0 4%;
  text-align:center;
}
于 2012-05-12T18:46:05.940 回答
3

缺点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/

于 2016-01-24T12:38:35.937 回答
1

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

于 2012-05-12T18:54:52.070 回答