flexbox容器内图片圆角与标题样式未生效问题求助

嘿，我帮你找到了问题的根源，咱们一步步来修复：

1. CSS语法错误直接导致figcaption样式失效 #

你的figcaption样式里，font-family: Arial后面漏掉了分号！浏览器解析CSS时，遇到这种语法错误会直接跳过整个规则，所以text-align、font-size这些属性根本没被应用上。

修复后的figcaption样式（补充分号即可）：

.pagecontents figure figcaption{ 
  font-family: Arial; 
  text-align: right; 
  font-size: 16px; 
  font-weight: bold; 
}

2. 图片圆角的小优化（确保稳定生效） #

你的图片圆角语法本身是对的，但默认图片是inline-block元素，偶尔会有布局上的小意外。给图片加个display: block，再补全最后一个属性的分号（虽然CSS允许省略，但养成好习惯能避免后续踩坑）：

修复后的图片样式：

.pagecontents figure img{ 
  border-radius: 8px; 
  padding: 40px 10px 20px 10px;
  display: block;
}

额外的Flex布局优化（可选） #

为了让你的书籍卡片在flex容器里排列更舒服，建议给figure加个flex属性，让它们自动分配容器空间：

.pagecontents figure {
  flex: 1 0 45%; /* 每个卡片占容器45%宽度，超出自动换行 */
  text-align: center; /* 让图片居中，配合figcaption的右对齐更协调 */
}

完整修复后的代码 #

CSS #

.pagecontents{ 
  display: flex; 
  flex-wrap: wrap; 
  margin-top: 20px; 
  margin-left: 20px; 
  margin-right: 20px; 
  border-radius: 10px; 
  height: 500px; 
  width: 1200px; 
  background-color: #A4B3B6;
}
.pagecontents figure img{ 
  border-radius: 8px; 
  padding: 40px 10px 20px 10px;
  display: block;
  margin: 0 auto; /* 让图片在卡片内水平居中 */
}
.pagecontents figure figcaption{ 
  font-family: Arial; 
  text-align: right; 
  font-size: 16px; 
  font-weight: bold; 
  padding-right: 10px; /* 给标题加一点右边距，避免贴边 */
}
.pagecontents figure {
  flex: 1 0 45%;
}

HTML #

<div class="pagecontents">
<figure>
<img src="https://images-na.ssl-images-amazon.com/images/I/91bbRIClz+L.jpg" alt="Cover of Norwegian Wood" height="300">
<figcaption> Norwegian Wood <br> Author: Haruki Murakami </figcaption>
</figure>
<figure>
<img src="https://images-na.ssl-images-amazon.com/images/I/81XSN3hA5gL.jpg" alt="Cover of Hitchhiker's Guide to the Galaxy" height="300">
<figcaption> Hitchhiker's Guide to the Galaxy <br> Author: Douglas Adams </figcaption>
</figure>
</div>

这样修改后，图片的圆角会正常显示，标题的样式也会完全生效，同时整个flex布局的排列会更美观~

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