将Divs与CSS对齐
[英]Aligning Divs with CSS
问题描述
I know there are tons of articles all over Google on doing something similar to this, but the problem is that they all vary on the implementation. 
我知道Google上有很多关于这样做的文章，但问题是它们的实现方式各不相同。 What I'd basically like to do is have a single div of a fixed width be aligned to the center of my page, with bars on the side stylable to whatever I'd like. 我基本上想要做的是将一个固定宽度的div对齐到页面的中心，侧面的横条可以根据我的需要进行样式设置。 In Flex (MXML), I could easily make this happen with something like this: 在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>
This would give me a design that looks like this: 这将使我的设计如下所示：
[sideBarLeft][content][sideBarRight]
The sidebars would expand as the screen area grows, but the content would stay the same, 500px wide. 边栏将随着屏幕区域的增长而扩展，但内容将保持不变，宽度为500px。
How would I achieve this in HTML with divs and CSS? 如何使用div和CSS在HTML中实现此目标？ Also, is there a way to set the minimum width of the sidebars? 另外，有没有办法设置边栏的最小宽度？ Ie: a size that they couldn't shrink below? 即：他们无法缩小到的尺寸？ (for example: <mx:VBox id="sideBarLeft" width="100%" minWidth="150"/>) （例如：<mx：VBox id =“ sideBarLeft” width =“ 100％” minWidth =“ 150” />）
And I apologize for the nature of how much of a novice I am at this stuff. 对于这个新手的丰富程度，我深表歉意。 I guess I've spent too much time building applications and too little time with HTML and CSS :) 我想我花了太多时间来构建应用程序，而花了很少的时间来使用HTML和CSS :)
3 个解决方案
解决方案1
3 已采纳 2009-08-19 19:08:37
Is there any particular reason you want to use div's over table cells in this case? 在这种情况下，您是否有任何特定原因要使用div的over表单元格？
Regardless, I came up with a quick solution you might like: 无论如何，我想出了一个您可能想要的快速解决方案：
<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>
I really minified it to fit nicely on here, but copy and paste that into a file and tell me what you think. 我确实将其缩小为适合此处的位置，但是将其复制并粘贴到文件中并告诉我您的想法。
Just be forewarned: using tables is the preferred way to do this, and is perfectly acceptable . 请注意：使用表是执行此操作的首选方法，并且完全可以接受 。 There is no problem mixing tables and divs, and styling/positioning tables with CSS. 将表和div以及样式/位置表与CSS混合使用没有问题。 This solution is more of a "workaround", but one thing is for sure - it works. 该解决方案更像是一种“解决方法”，但可以肯定的是，它可以工作。
解决方案2
0 2009-08-19 18:50:40
Edit: @Breakthrough's answer seems like it does exactly what you want using just div's and CSS; 编辑： @Breakthrough的答案似乎只使用div's和CSS即可完成您想要div's ； I'll just leave my CSS-ified solution with Tables up as an alternative. 我只剩下将Tables放在CSS定义的解决方案中。
<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>
解决方案3
0 2009-08-19 18:52:38
Take a look at this article: http://www.alistapart.com/articles/holygrail/ 看一下这篇文章： http : //www.alistapart.com/articles/holygrail/
It's the opposite of what you want (liquid middle, fixed outsides) but it will get you thinking and maybe lead you to the correct answer. 这与您想要的相反（中间的液体，固定的外部），但它会使您思考并可能引导您获得正确的答案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.