Question

我知道Google上有很多关于做类似事情的文章，但问题是它们的实现各不相同。我基本上喜欢做的是有一个固定宽度的div与页面的中心对齐，侧面的条纹可以根据我的喜好设置。在Flex（MXML）中，我可以通过以下方式轻松实现：

<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中实现此目的？另外，有没有办法设置侧边栏的最小宽度？即：它们的尺寸不能缩小到下方？（例如：＆lt; mx：VBox id =“sideBarLeft”width =“100％”minWidth =“150”/＆gt;）

我为这个东西有多少新手的性质而道歉。我想我花了太多时间构建应用程序，用HTML和CSS花费的时间太少了：）

Answer 1

在这种情况下，您是否有任何特殊原因要使用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>

我真的将它缩小到适合这里，但将其复制并粘贴到文件中并告诉我你的想法。

只是预先警告：使用表格是首选方法，完全可以接受。将表和div以及样式/定位表与CSS混合没有问题。这个解决方案更像是一种“解决方法”，但有一件事是肯定的 - 它有效。

Answer 2

编辑： @突破的答案看起来就像只使用div's和CSS一样。我将把我的CSS-ified解决方案与Tables up作为替代。

<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>

Answer 3

看一下这篇文章：http://www.alistapart.com/articles/holygrail/

它与你想要的相反（液体中间，固定的外部），但它会让你思考，并可能引导你得到正确的答案。

使用CSS对齐Div

3 个答案: