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

WBOY
풀어 주다: 2016-06-24 12:11:26
원래의
955명이 탐색했습니다.

最近遇到一个这样的问题,
在一个限制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>
로그인 후 복사


回复讨论(解决方案)

我在IE和firefox下试了试,结果相同

第一次遇到这个问题,
我觉得是这样的,
如果超过了max-width,那么容器的width就是 max-width所定义的宽度了,所以就不能自动适应了。


大家来讨论下。

IE与Firefox下的结果是不同的,IE8以下因为不识别max-width,所以再长的文本都只会一行显示出来,不会分行。

真没有办法吗?

支撑一下。。。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!