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

我终于通过这个JSFiddle示例找到了使用display:table; width:1%;的方法：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>

如何给DIV其内容的宽度？

1 个答案: