갤러리 이미지 플로팅

this gallery에서 마지막 이미지는 왼쪽으로 플로트해야하지만 중간에 위치해야합니다. 코드에 무슨 문제가 있습니까?갤러리 이미지 플로팅

HTML :

<div class="text-block7" > <a href="gal/60.png" class="gal2" rel="gal"><img src="gal/thumb/60.png" alt=""></a> </div>

CSS : 7 div 블록 추가하기 전에

#rightcolumn-12 .text-block7 { width: 239px; height: 190px; display: block; float: left; margin-top: 0px; margin-bottom: 15px;}

당신의 4 번째 이미지가 높기 때문에 이런 일이 발생

<div style="clear:left"></div>

2013-06-18 11:25:49

, 그래서 7 왼쪽으로 떠있을 때 이미지가 다시 슬래 밍됩니다. 그 요소.

이러한 종류의 동작을 방지하려면 div에 clear:left을 적용하는 CSS 규칙을 정의하면됩니다. 예 :

div[class^="text-block"]:nth-child(3n + 1) { 
    clear: left; 
}

참고 : nth-child pseudoclass 불행히도 IE8에서 작동하지 않습니다,하지만 당신은 절대적으로 그 브라우저를 지원해야하는 경우 단순히 CSS 수정보다 아마 더 떠 요소

2013-06-18 11:27:22 fcalderan

의 display: inline-block 및 vertical-align: top를 대신 사용할 수 있습니다 내 솔루션과 같은 추가 마크 업을 추가하는 것은 브라우저 지원이 필요한지에 달려 있습니다. IE8에 대해 생각해보십시오 : P –

그래서 저는 이런 종류의 작업을 위해'float' 대신에'inline-blocks'을 사용합니다. @NickR :) – fcalderan

답변