왜 Div 태그가 제대로 중첩되지 않습니까?

Question

누구나 통찰력을 줄 수 있다면 매우 감사하게 생각합니다. 다양한 날짜에 피트니스 클래스에서 예약을 표시하는 출력을 만들고 싶습니다. 아이디어는 3 개의 가로 행을 가지며 모든 행을 다루는 데 많은 행이 필요합니다. 이렇게하려면 테이블을 사용하는 대신 CSS를 사용하고 싶습니다.

좋아, 그래서 나는 다음과 같은 CSS 정의가 :

.ListSetContainer 
{ 
    background-color:Red; 
    border:1px solid #999999; 
    text-align:center; 
} 

.ListSet 
{ 
    margin: 2px 2px 2px 16px; 
    float: left; 
    clear:none; 
} 

.ListSet ul 
{ 
    background-color: #EEEEEE; 
    border: 1px solid #999; 
    margin: 2px 2px 16px 2px; 
    padding: 6px 6px 0px 6px; 
} 

그리고 다음 HTML을 :

<div style="clear:both;"> 
    <h4>Class Dates, Counts and Participants</h4> 
    <div class='ListSetContainer'> 
     <div class='ListSet'> 
     <ul>...{Class information here...} 
     </ul> 
     </div> 
     <div class='ListSet'> 
     <ul>...{Class information here...} 
     </ul> 
     </div> 
     <div class='ListSet'> 
     <ul>...{Class information here...} 
     </ul> 
     </div> 
    </div> -- End of First ListSetContainer 

    <div class='ListSetContainer'> 
     <div class='ListSet'> 
     <ul>...{Class information here...} 
     </ul> 
     </div> 
     <div class='ListSet'> 
     <ul>...{Class information here...} 
     </ul> 
     </div> 
    </div> -- End of Second ListSetContainer 
    </div> -- End of surrounding Div 

그러나 오히려 세 div의 두 개의 div를 가진 두 번째 행으로, 수평으로 배열 이어 받고보다 , 나는 이것을 얻고있다 :

Linked Image

몇 가지 메모. 첫째, HTML (ListSetContainer div에 ListSet div가 포함되어 있음)의 계층 구조가 출력에 반영되지 않습니다. 둘째, ListSetContainer div는 한 픽셀 높습니다. 표시된 배경이 없습니다! (나는 단지 그것을 놓치지 않도록 빨간색 배경을 사용하고있다). 전체를 둘러싸고있는 div는 아래로 가라 앉고 내부 div는 독자적으로 떠 있습니다. 수동으로 높이를 설정하는 것은 목록의 내부 div가 가변 높이이므로 (부팅하는 데 홀수로 보임) 작동하지 않습니다. 내가 부유물을 제거하면 : 왼쪽; 내부 divs에서, 그들은 화면의 전체 너비로 확장하고 따라서 3 연속 얻을 수 없습니다. 그래서 ... 나는 잃어 버렸어.

다시 도움 주시면 감사하겠습니다.

Answer 1

ListSetContainer에는 설정된 너비가 없기 때문입니다. 나는 그들이 모두 와이드 스크린 모니터의 한 줄에 들어갈 것으로 기대한다.

당신이 시도 할 수 : 적절한

.ListSetContainer { 
    width: 300px; 
} 

.ListSet { 
    clear: none; 
    float: left; 
    width: 100px; 
} 

과 스타일을.

Answer 2

ListSetContainer에는 높이/너비가 지정 될 수 있도록 일부 비 플로팅 컨텐트가 포함되어 있어야합니다. 요소를 플로팅하면 일반 레이아웃 계층 구조에서 벗어나므로 ListSets 만 포함 된 컨테이너에는 정상적으로 렌더링되는 내용이 포함되지 않습니다. 비 - 깨는 공간을 컨테이너에 추가하면 그 안에 무언가가있을 것이므로 너비/높이를 설정할 수 있어야합니다.

또한 ListSetContainer를 사용하려면 clear: both을 사용해야합니다. 이것은 ListSets의 새로운 "행"을 시작하게합니다.

Answer 3

.ListSetContainer 블록에 clear:both을 사용하십시오.

그러나 여전히이 사용하는 하나 개의 목록을 향상시킬 수

문제는 당신 ListSet 클래스가 필요하다는 사실에있다

<style type="text/css"> 
    .ListSetContainer { 
     list-style: none; 
     padding: 0; 
    } 
    .ListSetContainer li { 
     width: 33.333%; 
     float: left; 
    } 
    .ListSetContainer li li { 
     width: auto; 
     float: none; 
    } 
</style> 
<ul class="ListSetContainer"> 
    <li><ul><li>...{Class information here...}</li></ul></li> 
    <li><ul><li>...{Class information here...}</li></ul></li> 
    <li><ul><li>...{Class information here...}</li></ul></li> 
    <li><ul><li>...{Class information here...}</li></ul></li> 
    <li><ul><li>...{Class information here...}</li></ul></li> 
</ul> 

Answer 4

"디스플레이 : 블록;" 추가 또는 "부유 : 왼쪽;" 블록을 추가하는 경우 "display : block; width : 100 %"를 ListSetContainer 클래스에 추가하십시오.

Answer 5

고정 된 열 세트 (한 달에 하나씩)로 표 형식의 데이터를 제공합니다. 어떤 테이블을 사용했는지와 같은 것 같습니다. 이제는 테이블을 사용하고 죄책감을 느끼지 않아도됩니다!

이제 테이블을 사용하지 않을 경우 각 요소의 크기를 고정해야하지만 행당 요소 수는 고정하지 않아야합니다. 열 수는 브라우저 창의 크기에 따라 결정됩니다.

모두 실패하면 각 행 사이에 clear: both이 필요하다고 생각합니다.