Question

嘿所有，所以基本上我有一个非常简单的布局，带有标题图像，主要居中的文本区域。以及位于主中心文本区域左侧的侧边栏。这基本上就是我的布局：

<center>Header</center>
<div style="float:left;">Sidebar</div>
<center>Main Area</center>

好吧，侧边栏显然会一直对齐到页面的左侧，我希望它做的仍然是在页面的左侧，但我希望它“拥抱”主页中心区域。

以下是现在的基本情况，以及我想要发生的事情的箭头： http://img18.imageshack.us/img18/2307/exampleps.jpg

Answer 1

现场演示： http://jsfiddle.net/rRm7k/

HTML：

<div id="wrap">
    <div id="header"> HEADER </div>
    <div id="body">
        <div id="sidebar"> SIDEBAR </div>
        <div id="main"> MAIN CONTENT </div>        
    </div>
</div>

CSS：

#wrap { width:500px; margin:0 auto; }
#body { overflow:auto; }
#sidebar { float:left; width:150px; min-height:400px; }

Answer 2

尝试使用所有div：

<div>Header</div>
<div style="float:left;width:250px">Sidebar</div>
<div style="float:right;">Main Area</div>

Answer 3

这是一个解决方案：http://jsfiddle.net/MwEun/1/

您必须根据需要调整元素的宽度，但应该有效。这个例子是一个非常简单的html布局的真正基本版本。

用于居中元素的良好且坚如磐石的解决方案是设置宽度（例如500px），然后添加margin: 0 auto;

如何将侧边栏对齐到主要内容区域的左侧？

3 个答案: