CSS float : left는 미리보기 이미지가 대각선으로 정렬되도록합니다.>. <

Question

내 사이트의 구조를 업데이트 할 때 이상한 문제가 발생합니다.

사이트 URL은 http://nailian.ca입니다.

나는 페이지 당 많은 사람들이 많은,하지만 나는 그들에게

썸네일 {플로트를 줄 때 : 왼쪽; 너비 : 150px; 높이 : 200px; 여백 : 6px;}

그들은 내 첫 페이지에서 서로 대각선으로 정렬되기 시작합니다.

온라인 연습 게시판에서 문제없이이 트릭을 할 수 있기 때문에 CSS의 다른 부분과 관련이 있다는 것을 알고 있습니다.

하지만 왜 내 사이트에서 그것은 변덕스러운 행동을합니다 !! ??

Answer 1

초기 문제는 다음과 같이 구성됩니다.

(210)

1. .thumbnails은 당신의 이미지에 대한 컨테이너입니다.
2. 이는 어떤 이미지의 중간에 게시자가있어 어떤 이유로 이 발생했음을 의미합니다.
3. 사이에서 멀리 떨어져 있거나 모든 이미지를 한 게시물 안에 넣어야합니다.

마다 당신이 제 태그가 .thumbnail 후 미리 컨테이너에없는 즉, 즉 CSS를 망쳐 놨,

Answer 2

<article id="post-708" class="post-708 post type-post status-publish format-standard  hentry category-uncategorized">  
    <header class="entry-header">           
    <!-- .entry-meta -->             
    </header> 
    <!-- .entry-header -->   
</article> 

같이 float: right;

HTML 부분을 추가하여 변경 .hentry, .no-results{}는 엄지 화상 HTML과 문제를 일으키는 inbetween있는 자에게는 플로트를 추가하는 것은 문제를 해결 그들을 0 폭을 준다 (이것은이 아닌가요 꽤 힘들어)

Answer 3

을 (. 포스트 용기가 비어 있습니다)하지만 많은 기사가있다 미리보기 이미지가 있으므로 따라서 방정식에서 기사를 제거하거나 Benjamin의 솔루션을 사용하십시오.