直到將CSS規則關閉並重新打開之後，元素才排隊

我有使用CSS display：table（內聯，行，單元格等）構建的佈局。我使用apache進行本地開發，當我刷新頁面時，兩個div容器錯誤地排列在一起。但是，如果我取消選中並重新檢查display：table-row，它們會自行更正，並且頁面顯示正確。直到將CSS規則關閉並重新打開之後，元素才排隊

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>

來源

2012-11-15 Mike Earley

與.mode-bar-left和.mode-bar-right相關的問題打包成兩行？如果是這樣，這個問題與空白有關。想想兩個並排顯示的圖像。如果代碼中的標籤之間有空格，瀏覽器中將顯示空白。

解決方案＃1：
把你的邏輯一級上漲的DOM。將兩個模式條元素的display值更改爲table-cell（而不是當前的inline-table）。然後將.mode-bar-item元素更改爲display: inline-block（而不是table-cell）。

溶液＃2：
甲更快，更優雅的解決方案是添加到float: left.mode-bar-left。

在優雅的話題，我強烈建議您考慮一些不僅僅是div更語義上有意義的標籤。例如，.mode-bar-left顯然是一個列表（ul也許？）和.mode-bar-item元素明確列出項目（li）。

來源

2012-11-16 00:45:56

不做float，我轉移到css：table佈局的原因是當前實現的float/clear/absolutes的恐怖的b/c。 –

至於這個問題，如果你展開jsFiddle結果寬度，模式欄的東西排列很好（儘管你是正確的，我可能會更好地服務於LI）。問題在於「左側容器」和「中央容器」。具體來說，中央容器應該與左側容器頂部對齊，但目前不是。 –

啊 - 所以在回答你的問題時，我解決了它 - '中心容器'需要一個垂直對齊：頂部應用於它。我現在覺得有點笨。 –

你使用任何JavaScript/jQuery？在我自己最近的一個項目中，我遇到了類似的問題，我所要做的就是在標籤前將我的自定義燈箱腳本從右移到右，並且似乎解決了問題。有時候javascript可能會這樣。我不明白爲什麼，但事實就是這樣。

來源

2012-11-15 23:19:58 ndugger

我是，但不是在JS小提琴的例子中，它仍然是不對齊的...我必須玩轉它們，看它是否工作（雖然，再次，它不工作在jsFiddle它讓我相信這不是問題）。 –

直到將CSS規則關閉並重新打開之後，元素才排隊

回答

相關問題