【问题标题】：How do I override a parent element's width with an implicit child element's width?如何使用隐式子元素的宽度覆盖父元素的宽度？
【发布时间】：2015-04-17 03:26:04
【问题描述】：

我想将 div 元素的宽度指定为其中包含的子 img 元素的宽度。但是，此宽度是隐含的，具体取决于源图像的大小。

第一个 flex 项显示了我想要达到的效果，但是，我不得不手动将宽度的值设置为 150 像素。如何动态实现（最好不使用 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>

【问题讨论】：

标签： html css

【解决方案1】：

根据this 不能在css中完成:(

但如果您对脚本替代方案感兴趣..

JavaScript (demo)

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";
    }
});

jQuery (demo)

$(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"));
    });
});

希望对你有帮助！

【讨论】：

来自 OP... “最好不使用 javascript”
这就是我澄清的原因，根据this answer 这是不可能的，因此最好被撤销，然后从我这里：如果您对脚本替代方案感兴趣..
我不同意。我相信我上面的答案只适用于几行 CSS。
我想你的意思是说，“据此它不能在 css 中完成”。我之前看过那个页面，想知道这个结论是否适用于绝对宽度（就像这个问题一样），而不仅仅是相对/百分比宽度。好的脚本解决方案。
是的，我的意思是不能，当然@leishman 在我写这些的时候没有看到你的答案，非常好:)

【解决方案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>

【讨论】：

尝试从 div 中删除样式“width: 150px”，你会发现你的解决方案不起作用。
我更新了第二个 div，而不是第一个。我更新的 div 没有硬编码的宽度。