CSS-缩小父div以适合一个子的宽度并限制另一个孩子的宽度

小编典典

CSS-缩小父div以适合一个子的宽度并限制另一个孩子的宽度

css

假设一个父div有两个子div，一个包含文本，另一个包含已知（但可变）宽度和高度的图像。

我想要

第一个子（包含图像）的div的宽度缩小以适合图像的宽度（我可以这样做）
父div（未指定宽度）缩小以适合包含图像的div的宽度（也可以）
包含文本的第二个子div（也具有未指定的宽度）以匹配父div的宽度，而不管其包含的文本数量如何（这是棘手的地方）。

我有一个工作版本可以满足我的要求，直到第二个孩子中的大量文本将父div的宽度推到大于图像的宽度为止。

这是我的代码：

CSS：

#container{border:1px solid #f00;display:inline-block;}
#child1{border:1px solid #0f0;}
#child2{border:1px solid #00f;}
img {border:1px solid #000;}

HTML：

<div id="container">
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
<div id="child2">Lorem ipsum dolor sit amet.</div>
</div>

您可以通过单击“加长/缩短文本”链接以增加文本数量来查看问题出在哪里

tldr-我希望所有的div具有相同的宽度，该宽度等于图像的宽度

ps。只需使用现代浏览器解决方案

阅读 386

2020-05-16

共1个答案

小编典典

这是添加到CSS的内容：

#container {
    display: table-cell;
}
#child1 {
    display: table-row;
    width: 1px;
}
#child2 {
    display: table-cell;
    width: 1px;
}

2020-05-16