2010-07-13 201 views
1

我似乎無法讓我的CSS在IE中正常工作(我正在使用IE 8),並且我希望有人能夠就此分享一些意見。如何使用以下HTML代碼實現雙列布局?

這裏是我的向上兼容HTML代碼: -

<div id="column-content"> 
    <div id="content"> 
     <p>This is some text</p> 
     <div class="toc">Right content</div> 
    </div> 
</div>   

我想是有div#column-content將被顯示在左側和嵌套div.toc要在右側div#column-content容器外部顯示。把它看作是一個雙列布局,但唯一的問題是我不能徹底改變這個HTML代碼來模仿我在網站中找到的一些更簡單的佈局。所以,對我來說,唯一的解決方案就是把CSS弄得像我想要的一樣。

這就是我對我的CSS: -

#column-content { 
    width: 50%; 
    float: right; 
} 

#content { 
    margin: 0 15em 0 0; 
    position: relative; 
    border: 1px solid #ccc; 
    background-color:yellow; 
} 

div.toc { 
    margin:-3.3em -14em 0 0; 
    width:200px; 
    float:right; 
    border: 1px solid #ccc; 
    background-color:pink; 
} 

我得到我想要在Firefox的影響,所有的壁虎瀏覽器。如果你在Firefox中查看它,你可以看到黃色框和粉紅色框之間清晰的分隔。當我在IE中查看它時,這些框似乎彼此粘在一起,我似乎無法實現框之間的差距。

這可能使這項工作在所有瀏覽器?爲了更清楚地瞭解HTML,div.toc始終位於div#content容器內。我可以在div#content之內添加更多HTML標籤,並調整CSS以使兩列布局工作。

非常感謝。

+0

僅供參考 - 我沒有看到在IE8的bug,而是IE7。你確定你沒有看到在IE7模式下的IE8渲染? – ScottS 2010-07-13 15:37:25

回答

0

更改

div.toc {margin:-3.3em -14em 0 0;} 

div.toc {margin:-3.3em -14em 0 1em;} 

爲我工作(再次,按我的意見你的問題,對IE7),並沒有影響到火狐呈現(我沒有檢查任何其它瀏覽器)。顯然,IE7不會通過負右邊距進一步移動它,但是添加左邊距會造成您的差距。

如果您先將div.toc置於content之下並刪除-3.3em頂部邊距,我也認爲您會獲得更好的結果。所以:

<div id="column-content"> 
    <div id="content"> 
     <div class="toc">Right content</div> 
     <p>This is some text</p> 
    </div> 
</div> 

有了:

div.toc {margin: 0 -14em 0 1em;} 
+0

謝謝!這解決了我的問題。 – limc 2010-07-13 17:52:56