CSS 규칙을 껐다가 다시 켤 때까지 요소가 정렬되지 않음

Question

CSS 레이아웃을 사용하여 레이아웃이 작성되었습니다 (표 (인라인, 행, 셀 등)). 아파치로 로컬 개발을하고 있는데 페이지를 새로 고치면 div 컨테이너 중 두 개가 잘못 정렬됩니다. 그러나 display : table-row의 선택을 취소하고 다시 검사하면 문제가 해결되고 페이지가 올바르게 표시됩니다.

http://jsfiddle.net/fNNKT/

당신은 위의 jsFiddle에서 HTML과 CSS를 볼 수 있습니다. 그것은 실제로 거기에서도 작동하지 않습니다. 어쩌면 내가 뭔가 잘못하고 있고, 도움을받을 수 있습니다.

   <div class="cabinet-container"> 
       <div class="mode-bar"> 
        <div class="mode-bar-left"> 
         <div class="mode-bar-item">logo</div> 
         <div class="mode-bar-item active">Dispense</div> 
         <div class="mode-bar-item">Inventory</div> 
        </div> 
        <div class="mode-bar-right schedule"> 
         <div class="mode-bar-item">Sign-Out</div> 
        </div> 
       </div> 
        <div class="table"></div> 
        <div class="left-container"></div> 
        <div class="center-container"> 
         <div class="search-container"> 
          <div class="table-cell"> 
           <div class="search-field"></div> 
          </div> 
         </div> 
         <div class="nav-button-center-container"> 
          <div class="table-cell"> 
          </div> 
         </div> 
         <div class="list"> 
          <div class="table-cell"> 
           <div class="list-item-center-container"></div> 
           <div class="list-item-center-container"></div> 
           <div class="list-item-center-container-partial"></div> 
          </div> 
         </div> 
         <div class="nav-button-center-container-down-active"> 
          <div class="table-cell"></div> 
         </div> 
        </div> 
        <div class="footer"> 
         <div class="button-group table-border-5"> 
          <div class="button-secondary">Dispense Non-Drug</div> 
          <div class="button-secondary">Sort By: Last Name</div> 
         </div> 
         <div class="button-group-right table-border-5"> 
          <div class="button-primary">New Clinical Order</div> 
         </div> 
        </div> 
      </div>​ 

Answer 1

.mode-bar-left 및 .mode-bar-right과 관련된 질문이 두 줄로 묶여 있습니까? 그렇다면 문제는 공백과 관련됩니다. 인라인으로 나란히 표시된 두 이미지를 생각해보십시오. 코드의 태그 사이에 공백이 있으면 브라우저에 공백이 표시됩니다.

솔루션 # 1 :
는 DOM에서 높은 로직 한 단계를 가져 가라. 두 모드 막대 요소의 display 값을 table-cell (현재 inline-table 대신)으로 변경하십시오. 그런 다음 .mode-bar-item 요소를 display: inline-block (table-cell 대신)으로 변경하십시오.

솔루션 # 2 :
더 빠른, 더 적은 우아한 해결책은 .mode-bar-left에 float: left를 추가하는 것입니다.

우아함 주제에서 I 강력하게은 div보다 의미 론적으로 의미있는 태그를 더 많이 사용하는 것이 좋습니다. 예를 들어 .mode-bar-left은 분명히 목록 (ul?)이고 .mode-bar-item 요소는 분명히 목록 항목 (li)입니다.

Answer 2

javascript/jQuery를 사용하고 계십니까? 최근 프로젝트에서 필자는 유사한 문제를 겪고있었습니다. 필자는 사용자 지정 라이트 박스 스크립트를 태그 바로 앞에서 오른쪽으로 이동해야만 문제를 해결할 수있었습니다. 때로는 자바 스크립트가 그럴듯하게 될 수 있습니다. 나는 왜 그런지 이해하지 못한다. 그러나 그것이 그 방법이다.