떠 다니는 divs 래핑을 멈추는 방법 (미리보기 이미지)

Question

사이트가 있습니다. 여기에서 볼 수 있습니다. 여기에 캡쳐 화면이 있습니다. 작은 이미지와 많은 양의 텍스트가있을 때 이미지 주위를 감싸는 readmore 텍스트를 멈추고 싶습니다.

그 유효성을 검사 할 수 있도록 는

<div class="page-list-ext-item"> 

<div class="page-list-ext-image"><img width="110" height="73" class="attachment-110x110 wp-post-image" src="#"></a></div> 


<h3 class="page-list-ext-title">Heading</h3><div class="page-list-ext-item-content">TEXT 

<br><br>read more on: <a href="#">Title</a> 

</div> 

Answer 1

당신이이 작동

.page-list-ext-item-content{ 
    overflow:hidden; 
} 

추가 할 수 있습니다.

Answer 2

당신이해야 할 첫번째 일은 당신의 마크 업을 재 작성하는 것입니다. 위의 마크 업은 유효하지 않습니다. 브라우저는 항상 유효하지 않은 마크 업을 고치려고 노력하지만, 순수한 CSS 관점에서 볼 때 이러한 종류의 마크 업은 흔히 여러 버그의 주요 원인입니다. 엄지 손톱의 컨테이너를 취소합니다

.clear:after { 
    content: '.'; 
    display: block; 
    overflow: hidden; 
    clear: both; 
    height: 0; 
    visibility: hidden; 
} 

이하지만 당신은 여전히 ​​당신의 마크 업을 수정해야합니다 : 귀하의 경우, 부동 소수점은 항상 같은 그것에 여유와 용기가 필요합니다.