Question

我想使用图片标题，因为IE8或更低版本不支持figure标记，我认为<div>包含<img>并且标题会有所帮助。< / p>

但是，当我的标题比我的<img>宽时，包含<div>的宽度会扩展到标题宽度。这会导致<img>旁边的丑陋空白。相反，我希望标题能够突破界限。

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

有关示例，请参阅此jsfiddle

Answer 1

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>

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

1 个答案: