【发布时间】：2022-01-20 03:41:58
【问题描述】：
目标：我正在尝试使用 flexbox 为我的网站创建一个图片库网格
- 可以包含任意数量的照片，
- 在底部包含一个描述图像的文本 figcaption，并且
- 对移动设备具有响应性。
问题：我正在努力让宽度在网格容器上正常工作。它似乎拉伸到父 div 宽度的 100%，我无法让它缩小以适应 图像和文本 figcaption 的内容。
* {
box-sizing: border-box;
}
#container {
width: 800px;
margin: 0 auto;
}
.gridcontainer {
margin: 0 auto;
border: 2px solid #54d9ff;
border-style: outset;
}
.gridbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.gridbox img {
height: max-content;
width: 30%;
margin-top: 15px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
@media screen and (max-width: 600px) {
.gridbox img {
width: 90%;
}
}
.gridtext {
padding: 5px;
margin-top: 15px;
text-align: center;
color: blue;
font-weight: bold;
background-image: linear-gradient(#c4c4c4, #787878);
}<body>
<div id="container">
<div class="gridcontainer">
<div class="gridbox">
<img src="https://i.picsum.photos/id/820/200/300.jpg?hmac=oyShjC6apmZncG0xgz0zZEnh_1_j8eCRZnF8QxQ_PsE"/>
<!--<img src="https://i.picsum.photos/id/641/300/400.jpg?hmac=1xemcP7Oep2uO8c3Ekp3XcwY1S57YinXY4DTBd_GBbg"/>
<img src="https://i.picsum.photos/id/296/150/150.jpg?hmac=SSKcpx6mZuURJcKscRI27o7N2eS9iOh90116Rbdv1oc"/>
<img src="https://i.picsum.photos/id/541/600/270.jpg?hmac=qunG5B_lvK78sqhpBtHAPCRlMr6ciT2ZvMbxd6-8Mis"/>
<img src="https://i.picsum.photos/id/363/500/300.jpg?hmac=LZnmPmpU0TqF3LE_p3fn--rmS-Qwlc3pXmBS-Aax_2k"/>-->
</div>
<div class="gridtext">
Images from Lorem Picsum
</div>
</div>
</div>
</body>这个 3 列网格显示父 Div 的 100% 宽度。考虑到有多个图像，这没关系。
这是一个 1 列网格，但容器 div 仍拉伸到父 div 的 100%。这不行，因为我希望容器缩小到图像和 figcaption 的内容。
【问题讨论】：
-
您必须展示当前 html/css 的相关部分，以获取有关如何执行此操作的提示；但我想说
grid比flexbox 布局更适合您（它们非常相似；grid实际上是flex的扩展）。 -
欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用
[<>]记录输入和预期输出sn-p 编辑器。 -
@Raxi 我刚刚添加了 HTML 和 CSS。我会查看网格，看看是否有帮助。
标签： html css image flexbox css-grid