CSS : div 상자는 서로 겹치고 텍스트를 숨 깁니다.그들을 "맑게"하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/5027151

  •  14-11-2019
  •  | 
  •  

문제

나는 해결할 수없는 내 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.

Made an example with your code.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top