將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寬度限制爲單個子元素的寬度

回答

相關問題