如何在div中内联显示图形元素答案

【问题标题】：How to display figure elements inline in div如何在div中内联显示图形元素
【发布时间】：2016-03-14 14:13:16
【问题描述】：

我想在 div 元素中内联显示 figure 元素（包含图像），但它应该最多连续显示 3 张图像，水平居中。

像这样：

|X_X_X|
|X_X_X|
|_X_X_|

这是CodePen 示例：

片段

#out {
  width: 210px;
  height: auto;
  display: inline-block;
  margin: 0 auto;
}
.pic {
  width: 70px;
}
.fig-pic {
  position: relative;
  width: 70px;
}

<div id="out">
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
</div>

【问题讨论】：

标签： css html figure

【解决方案1】：

将inline-block 放到.fig-pic so you can use text-align on them：

#out{
  width: 210px;
  text-align: center;
}

.fig-pic{
  width: 70px;
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

img{
  width: 100%;
}

<div id="out">
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure><!--
  --><figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure><!--
  --><figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure><!--
--><figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure><!--
--><figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
</div>

However, watch out for the inline-block whitespace.

另外，删除figure 默认margins。

JSFiddle

【讨论】：

非常感谢您的帮助:)
@Fale1994 不客气。如果对您有帮助，请采纳答案。

【解决方案2】：

您可以将inline-block 和width:33.3% 用于figure，这样您每行将有3 个图像并且它会响应。只要内容不足以容纳整个 width 父容器，例如您的最后一行，在父容器中使用 text-align:center 将使内容居中。

* {
  box-sizing: border-box /* apply box model ta all elements */
}
body {
  margin: 0; /* reset default margin for body */
}
#out {
  width: 100%;
  font-size: 0; /* fix inline-block gap */
  text-align: center; /* align content to center */
}
figure {
  display: inline-block;
  width: 33.3%; /* make images to fit 3 per row */
  padding: 5%; /* demo */
  margin: 0 /* reset default margin for figure */
}
img {
  max-width: 100% /* width won't have more than 100% of parent width */
}

<div id="out">
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
</div>

【讨论】：

【解决方案3】：

用你自己的例子；

你的 fig-pic div 的需要

.fig-pic
{
  inline-block
  margin:0;
}

与彼此对齐。由于行内块元素之间总是有一点空间，你应该通过设置来消除那个空间

#out
{
  font-size:0 
}

或者让你的#out div 更宽一些。集中使用：

#out
{
  text-align: center;
}

Codepen

【讨论】：