我想将div元素的宽度指定为包含在其中的子img元素的宽度。但是，此宽度是隐含的，具体取决于源图像的大小。
第一个弹性项目显示了我试图实现的效果，但是，我必须手动将宽度值设置为150px。如何动态实现（最好不使用javascript）？
<!DOCTYPE html>
<html>
<head>
<style>
.flex-item {
border: 1px solid #30b0b0;
color: #303030;
text-align: center;
padding: 5px;
}
.flex-container {
border: 1px solid #30b0b0;
display: flex;
justify-content: space-around;
list-style: outside none none;
padding: 5px;
}
</style>
</head>
<body>
<ul class="flex-container">
<li class="flex-item">
<div style="width: 150px; margin: auto;">
<img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
<p>This text stays within the image</p>
</div>
</li>
<li class="flex-item">
<div>
<img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
<p>This text sticks out further than the image</p>
</div>
</li>
</ul>
</body>
</html>
答案 0 :(得分：2)
我认为制作图片容器display: table并为标题添加样式display: table-cell; caption-side: bottom应该可以解决问题。
注意，我从这个答案得到了一些帮助： Image caption width to same as image
我相信这是您正在寻找的图片标题功能！
<!DOCTYPE html>
<html>
<head>
<style>
.flex-item {
border: 1px solid #30b0b0;
color: #303030;
text-align: center;
padding: 5px;
}
.flex-container {
border: 1px solid #30b0b0;
display: flex;
justify-content: space-around;
list-style: outside none none;
padding: 5px;
}
.image-group-container {
display: table;
}
.caption {
display: table-caption;
caption-side: bottom;
}
</style>
</head>
<body>
<ul class="flex-container">
<li class="flex-item">
<div style="width: 150px; margin: auto;">
<img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
<p>This is in a div with a hard-coded width, so it stays in the proper boundaries.</p>
</div>
</li>
<li class="flex-item">
<div class="image-group-container">
<img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
<p class="caption">This text also stays within image without hard-coding the width.</p>
</div>
</li>
</ul>
</body>
</html>
答案 1 :(得分：0)
根据this，它无法在css中完成:(
但是如果你对脚本化的替代品感兴趣..
window.addEventListener("load", function () {
var flexItems = document.querySelectorAll(".flex-item");
for (var i = 0, l = flexItems.length; i < l; i++) {
var flex = flexItems[i];
var div = flex.children[0];
var img = div.children[0];
div.style.width = img.width + "px";
}
});
$(document).ready(function(){
$(".flex-item").each(function(){
var flex = $(this);
var div = flex.find("div");
var img = div.find("img");
div.css("width",img.css("width"));
});
});
希望它有所帮助！