将div宽度限制为单个子元素的宽度

我想使用图片标题，并且由于IE8或以下版本不支持figure标记，所以我认为<div>包含<img>，并且标题可能会有所帮助。将div宽度限制为单个子元素的宽度

但是，当我的标题宽于我的<img>时，包含的宽度将扩大为标题宽度。这会在<img>旁边产生丑陋的空白。相反，我希望标题能够突破线条。

我可以手动设置<div>宽度等于<img>宽度。或者在需要的地方手动插入标题<br />。但我希望能有更优雅的解决方案。

有关示例，请参阅本jsfiddle

2013-05-08 RubenGeert

CSS：

div.rimg { 
    display:table; 
    width:1px; 
    float:right; 
    border:1px solid #aaa; 
    border-radius:5px; 
    overflow:hidden; 
    margin:10px; 
} 
div.rimg img { 
} 
div.rimg span { 
    margin:10px; 
}

HTML：

<body> 
<h2>Pellentesque habitant morbi tristique senectus et netus</h2> 
    <div class="wrapper"> 
     <div class='rimg'> 
      <img src='https://dl.dropboxusercontent.com/u/116120595/tree_1_200_200.jpg' alt=''><span>What an exceptionally beautiful tree</span> 
     </div>et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</div> 
    </div> 
</body>

来源

2013-05-08 08:02:17 Arbel

万分感谢！惊讶的是，它的工作原理......因为'overflow：hidden'，我预计只有'img'的'1px'可见... – RubenGeert 2013-05-08 14:15:38

不客气！很高兴为您提供帮助。你可以安全地删除'overflow：hidden;'我把它留在那里，因为我想在你有一个用例的情况下做最小的改变。在表格显示中，溢出只能在固定布局表格中使用，在上面的代码中，如果将'table-layout：fixed;'添加到'div.ring'，那么溢出将被隐藏，'div'的宽度将会是1px！ – Arbel 2013-05-08 18:02:16

好吧，我再没有更多的不眠之夜了:-)为了提供任何带有稍微圆角的“”，我用'border-radius'组合了'overflow：hidden'。现在工作正常！ – RubenGeert 2013-05-09 06:45:04

将div宽度限制为单个子元素的宽度

回答

相关问题