使2列的div佈局表現得像一個2列的表格佈局

我有使用下面的HTML代碼的div一個基本的2列布局：使2列的div佈局表現得像一個2列的表格佈局

<div ID="main"> 
     <!-- body content --> 
    </div> 
    <div ID="sidepanel"> 
     <!-- side content --> 
    </div>

和下面的CSS代碼：

#main{ 
    width:80%; 
    float:left; 
    overflow:hidden 
} 
#sidepanel{ 
    width:18%; 
    float:right; 
    overflow:hidden 
}

雖然列大部分都做得很好，但我遇到了一個問題。如果我的主要內容需要正確顯示80％以上的屏幕寬度，則剩餘的寬度將被刪除。如果我刪除了兩個overflow:hidden項目，則側面板內容與正文內容重疊。在任何情況下，我都能正確看到一切的唯一方法就是使用Web瀏覽器縮小功能或增加屏幕分辨率。

了桌子，我可以簡單地使用此設置沒有CSS：

<table> 
<tr> 
<td> 
<!-- body content --> 
</td> 
<td> 
<!-- side content --> 
</td> 
</tr> 
</table>

，一切工作正常。

總體而言，如果主體中的內容對於屏幕太寬，我想要一個水平滾動條而不是剪裁。

任何人都知道如何解決這個問題，同時仍然使它與IE7兼容，而不必訴諸表佈局？

來源

2015-10-26 Mike

你可以創建一個類似的問題[這裏]（http://www.jsfiddle.net）？ – divy3993

#main{ 
    width:80%; 
    float:left; 
    overflow: scroll; 
}

或者，如果你想確保只有一個水平滾動條，作爲單獨的溢出會爲水平和垂直滾動：

overflow-x: scroll;

據我所知，溢出-X是在IE7中支持，所以你應該很好的去與此。

來源

2015-10-26 23:45:04 unpollito

到目前爲止，答案對我很有幫助，但現在我覺得我也需要在頂部有一個水平滾動條，因爲文檔的主要部分位於頂部，並且只是爲了使用屏幕底部而痛苦地滾動一個水平滾動條。 – Mike

https://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table有幾種方法。然而，出於某種原因，第一個選項對我來說不起作用，但是有jQuery插件可以實現這一點。這會起作用嗎？ – unpollito

我不想訴諸jquery。我覺得我是0.5％的Web開發人員，他們希望儘可能多地使用瀏覽器，包括那些無法處理jQuery或甚至運行jsfiddle的舊瀏覽器。 – Mike

使2列的div佈局表現得像一個2列的表格佈局

回答

相關問題