让链接内的图片与段落保持等宽的 css 实现方案
在实际开发中，常遇到类似需求：一个 标签内包含 和
两个块级/内联级混合元素，希望它们视觉上宽度一致（尤其是当图片有固定尺寸时，段落文字应严格对齐其左右边界）。传统方式如 inline-block 或 float 容易引发基线对齐、空白间隙或高度塌陷等问题，而现代 CSS 提供了更简洁可靠的解决方案——Flexbox 布局。
核心思路是将 元素设为 Flex 容器，并采用垂直主轴（flex-direction: column），此时所有直接子元素（即 和
）会自动拉伸至父容器的完整宽度（默认 align-items: stretch），从而天然实现等宽效果。
以下是推荐的完整实现代码：
ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 400px; /* 可选：显式设定容器宽度，确保 img 和 p 有统一基准 */
}
li a {
display: flex;
flex-direction: column;
text-decoration: none; /* 推荐移除下划线提升可读性 
*/
}
li a img {
display: block; /* 避免底部默认空白间隙 */
max-width: 100%;
height: auto;
}
li a p {
margin: 8px 0 0; /* 控制段落与图片间距 */
text-align: justify; /* 使文字两端对齐，充分利用宽度 */
hyphens: auto; /* 可选：启用断字，提升长单词排版效果（需配合 lang 属性） */
}HTML 结构保持不变，仅需确保语义正确：
Garrys Mod is a physics sandbox game in which you can do almost anything you want, including playing hide and seek, fighting monsters, fighting each other, escaping from jail, and much more.
⚠️ 注意事项：
内容本质是图片说明，也可考虑改用
该方案简洁、健壮且易于维护，是响应式图文列表布局的理想选择。
*/
}
li a img {
display: block; /* 避免底部默认空白间隙 */
max-width: 100%;
height: auto;
}
li a p {
margin: 8px 0 0; /* 控制段落与图片间距 */
text-align: justify; /* 使文字两端对齐，充分利用宽度 */
hyphens: auto; /* 可选：启用断字，提升长单词排版效果（需配合 lang 属性） */
}