"clear : both"하는 가장 좋은 방법은

Question

오래 전부터 clear이라는 CSS 클래스를 사용하고 있었는데 그 코드는 clear: both입니다. 나는 다음과 같은 방법으로 사용 (장고 구문에 표시된하지만 중요하지 않습니다) : 당신이 볼 수 있듯이, 나는, 수평리스트의 무리를하고있어

{% for item in collection %} 
    <ul class="horiz"><!-- horizontal list --> 
    <li>{{ item }}</li> 
    <li>{{ item }}</li> 
    </ul> 
    <div class="clear"></div> 
{% endfor %} 

는 그냥 테이블처럼 보이게하기 . CSS 규칙 .horiz li이 float: left을 의미한다고 가정 해보십시오. 이 "테이블"의 각 행 다음에 나는 <div class="clear"></div>을 사용하고 있습니다. 많은 HTML이 그렇게 단순합니다.

정말이 방법이 맞습니까? 내가 생각하지 못한 것이 더 간단하지 않은가? 제외한 모든 목록에 대한 CSS

http://www.positioniseverything.net/easyclearing.html

 
    #pages ul li { 
     display: block; 
     float: left; 
     ....... 
    } 


    #pages ul:after { 
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden; 
    } 

Answer 1

에서 그것을 할 방법은 사용할 수없는 이유가있다

Answer 2

...

<ul class="horiz clear"> 

... 먼저?

Answer 3

가장 확실한 해결책은 clear: both을 레이아웃의 다음 요소로 이동하는 것입니다. 이 ul가 div 다음에하는 경우, 당신은 필러 DIV 태그를 추가 할 필요없이, 그 안에 무엇이든지 표시 할 목록의 각을 원하는 경우에 그 divclass="clear" 등

Answer 4

, 당신은 overflow을 조정할 수 있습니다 제공 이와 목록의 특성 :

이

.horiz 
{ 
    overflow:hidden; 
} 

지금 목록 - 상품 자체가 떴다 경우에도 목록의 내용들이 흐름에서 이동하기 때문에 그들은 어쩌면 지금하고 같은 지역을 붕괴하지 않고 표시해야합니다.

Answer 5

ul에 청명을 넣으십시오.

Answer 6

UL 및 너비가 고정 너비에없는 이유는 무엇입니까? 너비가 너비의 두 배, 너비는 너비의 3 배 미만인 이유는 무엇입니까?

그러면 모든 LI를 하나의 UL에 넣고 LI에 float: left을 넣을 수 있습니다.

이렇게하면 각 목록 항목이 서로 옆에 표시되지만 UL (너비 때문에) 공간이 부족한 경우 다음 줄에 줄 바꿈됩니다.

Answer 7

또 하나의 조언. "break (<br/>)"태그에서 모두 clear를 사용할 수 있습니다. div에 코드를 작성할 필요가 없습니다. CSS에서 아래

코딩을 참조하십시오 : 사용

.clear { 
    clear:both; 
    height:0; 
    font-size: 1px; 
    line-height: 0px; 
} 

는 HTML입니다 :

<br class="clear" />

한번에!

Answer 8

Logesh Paul, 에 동의합니다. div 대신 br를 사용하는 것이 더 간단 해졌습니다.

하지만 루프 외부에 명확한 요소를 넣어야한다고 생각합니다.

Answer 9

ul에 overflow: hidden;을 넣을 수 있습니다. 각 ul에 대해 정확히 block formatting context이 새로 설정됩니다. 이는 정확히 원하는 것입니다.

나는 너처럼 clear: both;에 익숙하지만이 괴괴 망측 한 작은 변덕을 발견하고 나면 이걸 거의 독점적으로 사용하기 시작했다. 의미 상으로 우월하고 99 %의 경우에서 작동합니다.