CSS Divs未正確對齊

-1

我覺得這是一個很愚蠢的問題，而且css中的小東西總是讓我感到困惑。無論如何，我有一個設計，我試圖做2列。一個（這是一個300px的邊欄），它在右邊，另一個欄目應該填充剩餘的空間。CSS Divs未正確對齊

enter image description here 正如你可以看到側邊欄放在左邊的div下。

HTML：

<div class="wfix"><div class="col-fix"> 
    <div class="col-lg"> 
    <!-- 
     <div id="block"> 
      <bh>Homepage</bh> 
     <detail id="test">Loading...</detail> 
     </div> 
    --> 
    </div> 

    <div class="col-side"> 

    </div> 
</div></div>

CSS：

.wfix{ margin-left: 5em; margin-right: 5em; } 
.col-fix { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
} 
.col-lg, .col-side { 
    color: #999; 
    margin: 0; 
    padding: 0; 
} 
.col-lg { 
    margin-left: 0; 
    margin-right: 300px; 
    padding-top: 0px; 
    display: block; 
    vertical-align: top; 
    background-color: blue; 
    min-height: 500px; 
} 
.col-side { 
    width: 300px; 
    float: right; 
    padding-top: 0px; 
    display: block; 
    vertical-align: top; 
    background-color: red; 
    min-height: 500px; 
}

感謝您的幫助，傑克。

來源

2013-10-14 MysteryDev

浮動元素應該首先出現在HTML：

<div class="wfix"> 
    <div class="col-fix"> 
     <div class="col-side"></div> 
     <div class="col-lg"></div> 
    </div> 
</div>

Demo

來源

2013-10-15 00:00:37 Oriol

哇固定！我知道這是小事。爲什麼浮動元素首先出現？看起來很奇怪。 – MysteryDev

@ Jakes625由於浮動元素不能改變以前的元素，只能跟隨其後的元素。在你的情況下，你希望'＃col-side'推入'＃col-lg'，所以'＃col-side'應該首先出現。 – Oriol

感謝您的解釋！ – MysteryDev

CSS Divs未正確對齊

回答

相關問題