css - 如何赋予 DIV 其内容的宽度？

Question

我想在其内容中为 DIV 指定图片的宽度。

这是我的 HTML :

<div id="container">
   <div id="picandtext">
       <img src="https://placehold.it/480x320" />
       <p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</p>
   </div>
</div>

这是我的 CSS:

#container { height: 600px; display:table; width:1%; background: red; padding:10px; }
#picandtext { height: 400px; display:table; width:1%; background: green; padding:10px; }
#picandtext img { height: 180px; }
#picandtext p { height: 180px; }

我终于找到了一种方法来用 display:table; width:1%; 正如您在这个 JSFiddle 示例中看到的那样:https://jsfiddle.net/Ls750c64/2/

但我想知道这种方式是否是最好的方式？

Answer 1

根据您现有的标记，您可以制作 #container display: inline-block; 并用文本绝对定位 p。

#container {
  height: 600px;
  display: inline-block;
  background: red;
  padding: 10px;
}

#picandtext {
  height: 400px;
  background: green;
  padding: 10px;
  position: relative;
}

#picandtext img {
  height: 180px;
}

#picandtext p {
  position: absolute;
  left: 10px;
  right: 10px;
}

<div id="container">
   <div id="picandtext">
       <img src="https://placehold.it/480x320" />
       <p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</p>
   </div>
</div>

还有一种不太受支持的方法是使用固有大小调整。浏览器对它的支持很糟糕。 http://caniuse.com/#feat=intrinsic-width

#container {
  height: 600px;
  display: inline-block;
  background: red;
  padding: 10px;
  width: min-content;
}

#picandtext {
  height: 400px;
  background: green;
  padding: 10px;
  position: relative;
}

#picandtext img {
  height: 180px;
}

<div id="container">
   <div id="picandtext">
       <img src="https://placehold.it/480x320" />
       <p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</p>
   </div>
</div>