18

比如说，一个父 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>

这是一个jsfiddle：http: //jsfiddle.net/BmbAS/1/

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

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

附言。只需要现代浏览器解决方案

4

3 回答 3

28

请参阅您的 jsFiddle 的此编辑版本。

这是添加到 CSS 中的内容：

#container {
    display: table-cell;
}
#child1 {
    display: table-row;
    width: 1px;
}
#child2 {
    display: table-cell;
    width: 1px;
}
于 2012-10-05T13:21:46.313 回答
3

@Chris 提供的答案使我得到以下很好的解决方案，我需要将容器 div 仅适合第一个子元素（并让其余子元素自动适应容器的宽度）：

div.container {
    width: fit-content;
    max-width: 100%;
    margin: 16px auto;
    display: table;
}

div.inner-primary {
    display: block;
}

div.inner-rest {
    margin-top: 8px;
    display: table-caption;
    caption-side: bottom;
}
<div class="container">
  <div class="inner-primary"><div style="width:200px; border:1px dotted #ccc; border-radius:4px; padding: 4px;">This is the main element that drives the width of the container.</div></div>
  <div class="inner-rest">This is the first of the rest divs that fit automatically to the container...</div>
  <div class="inner-rest">This is the second element...</div>
</div>

于 2019-05-26T12:52:12.767 回答
-2

如果您愿意使用一点 javascript（本示例中为 jQuery），您可以将文本 div 的宽度设置为图像 div 的宽度。

尝试$("#child2").css({'width': $('#child1').width()});在你的小提琴中添加到 JS 的末尾，或者在这里查看 fork：http: //jsfiddle.net/VXEMu/

于 2012-10-05T13:28:32.520 回答