> 웹 프론트엔드 > HTML 튜토리얼 > 高分求:DIV要么撑破,要么就被截断隐藏。怎么才能根据长短自适应显示呢_html/css_WEB-ITnose

高分求:DIV要么撑破,要么就被截断隐藏。怎么才能根据长短自适应显示呢_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:25:47
원래의
1198명이 탐색했습니다.

在CSS内的DIV定义如下

div,li,td,p,select,input,textarea,a,button,input{font:12px Verdana, Arial, Helvetica, sans-serif;color:#505050;text-decoration: none;overflow:hidden;word-break:break-all;word-wrap: break-word; }
로그인 후 복사
로그인 후 복사


可是,内容要么被截断,如下图:


内容要么就把DIV撑破了,直接在外面显示,如下图:



如果刷新一下,则可以正常显示。
不知应该如何解决。

请指教


回复讨论(解决方案)

CSS的定义如下:

div,li,td,p,select,input,textarea,a,button,input{font:12px Verdana, Arial, Helvetica, sans-serif;color:#505050;text-decoration: none;overflow:hidden;word-break:break-all;word-wrap: break-word; }
로그인 후 복사
로그인 후 복사

overflow:hidden;
去掉后,不截断了,但是撑破

两个地方都有啊。

在CSS定义里面加一句:

Height:auto;

终极解决方案来了:

在你的总容器DIV上加上这个属性:overflow:hidden;

然后在你的子容器DIV上都加上这个属性:padding-bottom:100000px;margin-bottom:-100000px;

楼主另外一帖里,我也回了,看能不能被赏200米

不行啊,还是没搞定

不行啊,还是没搞定

真正的解决方法,这次绝对有效,我已经试过了:

1、如果父DIV和子DIV都没有定义高度,而且没有使用浮动(float),高度就会自适应,不会出现问题。

2、当你在子DIV里使用float之后,你会发现父DIV不再随子DIV的高度自适应。

这时我们需要做的就是:
在使用float的DIV之后再加一个空的DIV,然后在这个DIV上清除float。

举例:

<styletypestyletype="text/css">     #fatherDIV{border:#000000solid5px;}    #babyDIV1{border:#00ffffsolid5px;float:left}      #babyDIV2{border:#0033CCsolid5px;float:right} </style> <div id="fatherDIV">父div     <div id="babyDIV1">子div</div>     <div id="babyDIV2">子div</div>     <div style="clear:both">就是这个用于clear错误的</div></div>
로그인 후 복사

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