容器内的文本换行后的自动宽度_html/css

容器内的文本换行后的自动宽度_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 12:11:26

original

955 Les gens l'ont consulté

最近遇到一个这样的问题，
在一个限制max-width的容器内，当内部文本不够长时，容器的宽度能自动适应，但当文本长到换行时，容器的宽度则不能自动适应。
有没有朋友能帮忙看一下这么问题，要求是，最要不要动现在的样式，因为这些样式是公用的，最后是写些覆盖的样式。谢谢。附上提取的代码，方便大家直接调试的。

IE上看不到这个问题，Firefox等标准浏览器能看到这个问题。

<style>.large-thumbnail {width:590px;font-family:Arial, Helvetica, sans-serif;font-size:12px;}.notices {    float: right;    padding: 0 8px 32px 0;    text-align: right;    width: 120px;}.large-thumbnail .notices {    margin-right: -1px;    margin-top: -2px;    padding-bottom: 0;    width: auto;}.notices.urgency .skinny-urgency{    -moz-border-radius: 2px 0 0 2px;    background-color: #339900;    border: thin solid #BCBCBC;    color: #FFFFFF;    padding: 6px;}.msg-bubble {    color: #000000;    display: inline-block;    font-size: 11px;    max-width: 164px;    position: relative;    text-decoration: none;}</style><!-- 分行div --><div class="large-thumbnail">	<div class="notices urgency">		<a class="msg-bubble skinny-urgency">			<strong>Seulement 2 chambres restantes</strong><br> &agrave; ce prix		</a>	</div></div><br style="clear:both;"/><br style="clear:both;"/><br style="clear:both;"/><!-- 不分行div --><div class="large-thumbnail">	<div class="notices urgency">		<a class="msg-bubble skinny-urgency right-center">			<strong>Seulement 2 cham</strong><br> &agrave; ce prix		</a>	</div></div>

Copier après la connexion