使用figure/figcaption标签布局图片：解决第二张图片无法左浮问题

嘿，折腾两天肯定头大了吧？你的问题主要出在figcaption的浮动规则和元素宽度分配上，还有个容易忽略的小细节——CSS里的中文引号！咱们一步步把它搞定：

问题诊断 #

你当前的CSS里，figcaption设置了float: left和width:30%，还加了clear:right，这会让figcaption和img在figure内部左右排列，挤占了figure的可用空间，导致第二个figure没法挤到同一行。另外clearfix里的content: “”;用了中文引号，这会让清除浮动的规则直接失效！

修复方案 #

咱们把每个figure做成独立的“图片卡片”，让它整体占45%宽度，内部的img和figcaption上下排列，这样就能轻松实现每行2张的布局：

修正后的CSS代码 #

/* 清除浮动的容器，注意用英文引号！ */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.container {
  /* 给容器加个最大宽度，避免屏幕太宽时图片拉伸变形 */
  max-width: 1200px;
  margin: 0 auto;
}

/* 每个figure作为独立卡片，占45%宽度，左右留2.5%的间距 */
figure.imgcol {
  margin: 0 2.5% 20px; /* 上下间距20px，左右各2.5%，凑成5%的间隙 */
  float: left;
  width: 45%;
  /* 可选：加个边框或阴影让卡片更清晰 */
  border: 1px solid #eee;
  padding: 10px;
  box-sizing: border-box; /* 让padding和border算在宽度里，避免溢出换行 */
}

/* 图片占满figure的宽度，保持比例 */
figure.imgcol img {
  width: 100%;
  height: auto;
}

/* figcaption在图片下方正常显示，宽度100% */
figure.imgcol figcaption {
  width: 100%;
  margin-top: 8px;
  text-align: center; /* 可选：让文字居中更美观 */
  /* 去掉之前的float和clear规则，避免干扰布局 */
}

对应的HTML结构 #

<div class="container clearfix">
  <figure class="imgcol">
    <img src="你的图片地址1" alt="图片描述1">
    <figcaption>Experimentation with color and texture.</figcaption>
  </figure>
  <figure class="imgcol">
    <img src="你的图片地址2" alt="图片描述2">
    <figcaption>Another creative design piece.</figcaption>
  </figure>
  <figure class="imgcol">
    <img src="你的图片地址3" alt="图片描述3">
    <figcaption>Third image caption here.</figcaption>
  </figure>
  <figure class="imgcol">
    <img src="你的图片地址4" alt="图片描述4">
    <figcaption>Fourth image caption here.</figcaption>
  </figure>
  <figure class="imgcol">
    <img src="你的图片地址5" alt="图片描述5">
    <figcaption>Fifth image caption here.</figcaption>
  </figure>
</div>

为什么这样改？ #

• 每个figure.imgcol作为独立单元，45%宽度+左右2.5%的间距，刚好一行放下2个
• box-sizing: border-box确保padding和边框不会让元素宽度超过45%，避免溢出换行
• 取消figcaption的浮动，让它在图片下方正常显示，不会干扰figure的整体布局
• 修正了clearfix里的中文引号，让清除浮动的规则生效，避免容器高度塌陷

这样调整后，5张图片就会自动按每行2张排列，最后一行显示1张，完美解决你的问题！

内容的提问来源于stack exchange，提问作者Iffy