使用CSS對齊Div

我知道Google上有很多文章在做類似這樣的事情，但問題是它們在實現上都有所不同。我基本上喜歡做的是將一個固定寬度的單個div與我的頁面中心對齊，側面的條形可以根據需要隨意調整。在Flex（MXML），我可以很容易地做到這一點的東西是這樣的：使用CSS對齊Div

<mx:HBox width="100%"> 
    <mx:VBox id="sideBarLeft" width="100%"/> 
    <mx:Panel id="content" width="500"/> 
    <mx:VBox id="sideBarRight" width="100%"/> 
</mx:HBox>

這會給我的設計，看起來像這樣：

[sideBarLeft][content][sideBarRight]

側邊欄將擴大爲屏幕區域增長，但內容將保持不變，500px寬。

我該如何用div和CSS實現HTML？另外，有沒有辦法設置側邊欄的最小寬度？即：他們無法縮小的尺寸？（例如：< mx：VBox id =「sideBarLeft」width =「100％」minWidth =「150」/ >）

我很抱歉我在這個東西有多少新手。我想我已經花了太多的時間來構建應用程序和時間太少HTML和CSS :)

來源

2009-08-19 Naftuli Kay

在這種情況下，您是否有任何特殊的原因要使用div的表格單元？

無論如何，我想出了一個快速的解決方案你可能會喜歡：

<html><head> 
<style type="text/css"> 
*   { margin: 0; padding: 0; } 
body  { text-align: center; } 
#content { width: 500px; height: 100%; margin: 0 auto; 
      text-align: left; background: #DDDDDD; overflow: auto; } 
.column { width: 50%; position: absolute; top: 0; height: 100%; } 
#leftcol { margin-right: 250px; background: #AAAAAA; height: 100%; } 
#rightcol { margin-left: 249px; background: #AAAAAA; height: 100%; } 
</style> 
</head><body> 
<div class="column" style="left:0;"> 
<div id="leftcol">This is the column on the left.</div> 
</div> 
<div id="content">Your content goes here.</div> 
<div class="column" style="right:0;"> 
<div id="rightcol">This is the column on the right.</div> 
</div> 
</body></html>

我真的很精縮它很好地適應在這裏，但複製並粘貼到一個文件，並告訴我你的想法。

只是預先警告：使用表格是這樣做的首選方法，並且完全可以接受。使用CSS混合表格和div以及樣式/定位表沒有任何問題。這個解決方案更多的是「解決方法」，但有一點是肯定的 - 它的工作原理。

來源

2009-08-19 19:08:37 Breakthrough

認真。 Veerrry很好。 – Donut 2009-08-19 19:17:35

這真是天才。做得好！對不起，因爲我正在學習更多關於CSS的知識，所以其他開發人員不斷勸阻我使用表格。就像在設計中使用表格這種奇怪的巫術一樣。 – 2009-08-19 19:43:24

有些情況下可以使用表格，以及使用div的好處。在互聯網上的一般想法是隻使用div的...我會說使用div的，但如果你絕對需要使用表，那麼去 - 特別是在這樣的情況下，它將與每一個單一的兼容瀏覽器（比高級CSS技巧更重要）。這一切都取決於你的佈局得到多麼複雜。 – Breakthrough 2009-08-19 19:58:29

編輯： @突破的答案似乎像它你想只用div's和CSS到底是什麼;我將把我的CSS-ified解決方案與表格一起作爲替代方案。

<html> 
<head> 
    <style type="text/css"> 
     #main { min-width: 800px; width: 100%; } 
     #content { width: 500px; background: red; } 
     .sidebar { background: blue; min-width: 150px; } 
    </style> 
</head> 
<body>  
<table id="main"> 
    <tr> 
     <td class="sidebar">Left</td> 
     <td id="content">Center</td> 
     <td class="sidebar">Right</td> 
    </tr> 
</table>  
</body> 
</html>

來源

2009-08-19 18:50:40 Donut

這篇文章請看：http://www.alistapart.com/articles/holygrail/

這是你想要什麼（液體中，固定外側）相反的，但它會讓你思考，也許導致你正確的答案。

來源

2009-08-19 18:52:38 Jason

使用CSS對齊Div

回答

相關問題