CSS : div 상자는 서로 겹치고 텍스트를 숨 깁니다.그들을 "맑게"하는 방법은 무엇입니까?
문제
나는 해결할 수없는 내 DIV 박스에 작은 문제가있다.
이 Div 상자를 동적으로 생성합니다.
<div id="pagelist">
<div class="pagelist_img"><img src="images/default.gif"></div>
<div class="pagelist_h1">HEADLINE</a></div>
div class="pagelist_excerpt">SUMMARY</div>
</div>
.
각 DIV 상자는 상단의 이미지, 헤드 라인 및 게시물의 짧은 요약과 같이 구성됩니다.이제 내 문제는 상자가 서로 겹치지 만 충분히 요약 부분이 그 아래의 DIV 상자의 이미지 아래에 숨겨져 있다는 것입니다.
괜찮아, 그것은 조금 혼란 스러울 수 있지만, 라인의 요점은 어떤 든 상자에 분리되지 않고 서로 겹치지 않습니다.
PageList Div 상자의 CSS는 다음과 같습니다.
#pagelist{
float: left;
width: 280px;
margin: 0 40px 20px 0;
position: relative;
height: 100px;
}
.pagelist_h1 {
font-size: 1.8em;
font-weight: bold;
}
.pagelist_img{
clear:both;
top: 0px;
position: relative;
}
.pagelist_excerpt, .pagelist_excerpt p {
font-size: 1em;
color: #000000;
clear:both;
}
.
나는 어떤 사람들에게는 해결책을 가지고 있거나 올바른 방향으로 나를 지적 할 수 있기를 바랍니다.나는 그것이 clear를 사용하는 문제 일뿐입니다. 태그는 모두 태그를 사용하지 않았지만 아무 것도하지 않았습니다.
성실
- Mestika
해결책
Use a clearfix. Something along the lines of:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1; /* triggers hasLayout */
}
And modify your markup to be
<div id="pagelist" class="clearfix">
http://www.positioniseverything.net/easyclearing.html
Also, see the dupes:
다른 팁
Try removing the positioning and clears, as default <div>
s are block level and should display one under the other.
제휴하지 않습니다 StackOverflow