如何根据 child 内容大小扩展 div？

Question

我的观点如下：

<div id="container_card">
    <div id="child_top_container">
        <div id="logo"><img src="http://placehold.it/175x100"></div>
        <div id="title"><p>This title block width depends on size of logo</div>
    </div>
    ...
</div>

Div #container_card 具有固定的宽度和高度，即 600px x 300px。此外，Div #child_top_container 遵循相同的宽度，600px，但高度为 125px。

Child #logo 有一张图片，图片的大小是随机的。我说随机，因为有时用户会上传矩形和正方形。

问题是，我想像这样显示块段落 #title：

+-------------------- 600px --------------------+
+-------------- #child_top_container -----------+
+                  +                            +
+ logo (175x100)   + This is title block        +
+                  +                            +
+------------------+----------------------------+
+------------ end #child_top_container ---------+
+-------------------- 600px --------------------+

如果图片的宽度小于上面的宽度，将如下所示：

+-------------------- 600px --------------------+
+-------------- #child_top_container -----------+
+                +                              +
+ logo (150x100) + This is title block          +
+                +                              +
+----------------+------------------------------+
+------------ end #child_top_container ---------+
+-------------------- 600px --------------------+

或类似这样的内容：

+-------------------- 600px --------------------+
+-------------- #child_top_container -----------+
+                     +                         +
+ logo (250x100)      + This is title block     +
+                     +                         +
+---------------------+-------------------------+
+------------ end #child_top_container ---------+
+-------------------- 600px --------------------+

我已经通过 jQuery 函数和使用 window.resize 事件实现了这一点，但有时当我添加到轮播 (bs3) 时看起来很难看。

问题是，我可以使用不依赖于 js/jquery 的纯 css 来实现某些解决方案吗？谢谢

抱歉我的英语不好，因为它不是我的母语。

Answer 1

display:flex 应该这样做：

.child_top_container {
  width:600px;
  border:solid;
  margin:auto;
  display:flex;
  align-items:center;
}
#title {
  flex:1;
  text-align:center;
}
img {
  display:block;
}

<div class="child_top_container">
  <div id="logo"><img src="http://placehold.it/175x100"></div>
  <div id="title"><p>This title block width depends on size of logo</div>
</div>
<div class="child_top_container">
  <div id="logo"><img src="http://placehold.it/150x100"></div>
  <div id="title"><p>This title block width depends on size of logo</div>
</div>
<div class="child_top_container">
  <div id="logo"><img src="http://placehold.it/300x120"></div>
  <div id="title"><p>This title block width depends on size of logo</div>
</div>

看看https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何根据 child 内容大小扩展 div？

How to expand div based on child content size?

html

css

expand

containers