중첩 된 수레 지움

Question

나는 엄지 손톱 그리드가있는 이미지 갤러리와 비슷한 타일 격자 모양의 그리드를 만들고 있는데, 3 개의 이미지 이후에 다음 줄로 감싸는 이미지가 필요합니다. 그래서 저는 각각 이미지가 들어있는 div를 묶어서 플로트를 세 이미지 뒤에 수동으로 지 웁니다.

문제는 이미 모든 것을 배열하기 위해 이미 float을 사용하는 다소 복잡하고 복잡한 기존 템플릿에서 작업하고 있다는 것입니다. 내 그리드에서 플로트를 지우면 전체 페이지를 스크램블링 할 수 있습니다. 아마도 지금까지 페이지의 모든 플로트를 지우고 있기 때문일 수 있습니다. 내가 무엇을 할 수 있을지?

빈 div를 삽입하여 플로트를 비우고 있습니다. 예 :

<div style='clear:right'> 

다른 수륙로 청소 방법 중 하나가 더 잘 작동합니까?

Answer 1

은 마크 업과 같이 경우 :

div 
img 
img 
img 
row break 
img 
img 
img 
... 

이 그럼 당신은 매 3 개 블록 후이를 추가해야합니다

div 
div 
    img 
    img 
    img 
div 
    img 
    img 
    img 
... 

:

<br class="clear" /> 

을하지만 마크 업이 같은 경우

.. 그러면 내부 DIV에 다음의 .clear 클래스를 적용하면됩니다.

어느 쪽이든, 당신의 스타일이 추가 :

.clear:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
* html .clear { height: 1%; } 
*:first-child+html .clear { min-height: 1px; } 

당신은 수레를 포함하는 모든 다른 요소에이 클래스를 사용할 수 있습니다.

Answer 2

IE> = 8 지원이 적합한 경우 부동 소수점 대신 display: table을 사용하는 것이 좋습니다. 그리드를 표시하려면이 작업을 수행하는 데 더 적합한 방법입니다.

http://www.quirksmode.org/css/display.html#table

Answer 3

나는 각각의 이미지가 포함 된 요소의 스타일을 display: inline-block;를 사용하려고 것입니다. 하나 개의 컨테이너에 대한 HTML 코드의 예 :

이

 
<style> 
.figure { 
    display: inline-block; 
} 
</style> 

<div class="figure"> 
    <img src="littlepony.jpg" alt="My cute little pony" width="13" height="37" /> 
</div> 

은 이제 IE6, IE7과 파이어 폭스 2와이를 사용하여 몇 가지 함정이 :

• IE 6이 7 hasLayout의가있는 경우에만 스타일 인라인 요소가 트리거됩니다

 
<!--[if lte IE 7]> 
.figure { 
    display: inline; 
    zoom: 1; /* triggering hasLayout */ 
} 
<![endif]--> 

: 나는이 작업을 수행 할 경우 인라인 블록 행동를 볼 수 있습니다 의미
• 파이어 폭스 2는 display: inline-block;은 그래서 당신은 다른 디스플레이 명령에 의해 후자를 선행해야 이해하지 않습니다

   
  .figure { 
      display: -moz-inline-stack; 
      display: inline-block; 
  } 
  

  지금은 파이어 폭스 2는 조금 성가 시게 할 것이다. 먼저 .figure 요소에 자식 요소가 하나만 있어야합니다. 그렇지 않으면 자식이됩니다.스택. 그래서 당신은 당신의 이미지에서 전설이있는 경우, div.figure 및 IMG + P (여전히 FX2에서)

 

    <div> 
     <img src="littlepony.jpg" alt="Photo of my cute little pony" width="13" height="37" /> 
     <p>Second child of .figure>div and not .figure</div> 
    </div> 
</div> 

두 번째 사이 사업부를 삽입, 당신은 때때로 알 수 있습니다 당신은 '수 더 이상 -moz-inline-stack'ed 요소 안의 텍스트를 선택하거나 포함 할 수있는 링크를 클릭하지 마십시오. 그렇지 않으면 약간의 도움이 될 것입니다, 일반 CSS 이후에 발생해야 IE6/7에 대한 물론

 
    .figure div { 
     position: relative; 
    } 

조건 코멘트 : 수정은 상대적으로 추가 된 사업부를 배치하는 것입니다.

마지막으로, 우아한 해결책이없는 경우 TABLE을 사용하십시오. td와 no th 만있는 간단한 테이블. 것을 발생하는 경우 :

• IE6, 7 좋아하지 않는 display: table-sth
• 당신의 CMS는 inline-block에 대한
• 파이어 폭스 3 지원이 더 도움이이다, 그렇지 않으면 다른 사이트에 잘 작동 될지에 문제가 발생

당신이 테이블 반 사용자에게 문제를 일으키는 어떤 반 솔루션을 사용하는 모든 사람들을위한 더 나은 예보다

)

Answer 4

(이미이없는 경우)
1. 는
2. 는 컨테이너 사업부에 제한적인 폭을 설정 적절한 컨테이너 사업부 만들기 - 같은 3 그 이미지를 같게 차지합니다.
3. 모든 이미지를 플로트 허용 - 자동으로 줄입니다.
4. 'overflow : hidden'으로 컨테이너 div를 설정하면 수레가 표시됩니다.

단순화 된 버전은 다음과 같습니다 도움하지 않는 것

<style> 

div#container { 
    overflow: hidden; 
    width: 300px; 
} 

div#container img { 
    float: left; 
    width: 100px; 
} 

</style> 

<div id="container"> 

    <img src="" /> 
    <img src="" /> 
    <img src="" /> 


    <img src="" /> 
    <img src="" /> 
    <img src="" /> 


    <img src="" /> 
    <img src="" /> 
    <img src="" /> 

</div>