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

嘿所有，所以基本上我有一个非常简单的布局与标题图像，主中心文本区域。以及位于主要居中文本区域左侧的侧边栏。这基本上是我的布局的外观：如何将侧边栏对齐主内容区域的左侧？

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

那么侧边栏显然会一路对齐到页面的左边，我想它做的事情仍然是在左侧该页面，但我希望它“拥抱”主要居中区域。

这里是什么样子，现在一个基本的图片，我想发生什么箭头： http://img18.imageshack.us/img18/2307/exampleps.jpg

来源

2011-02-06 MJ93

避免，它已被弃用。此外，你可能会发现http://jsfiddle.net/用于分享你的代码。 – 2011-02-06 21:58:25

直播演示：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; }

来源

2011-02-06 22:02:09

与所有div尝试它，而不是：

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

来源

2011-02-06 21:51:34

，但我需要主要区域和标题居中.. 我确实有标题和主区域内div的 – MJ93 2011-02-06 21:56:51

尝试使用侧边栏左侧和右侧居中。一个可以是空的。或者在主要区域的右侧添加适当尺寸的边距。 – BillThor 2011-02-06 22:28:26

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

你必须适应元素的宽度，以您的需求，但应该工作。这个例子是一个真正简单的html布局的基本版本。

用于定心元件A好和岩石固溶体是设置一个的宽度（例如500像素），然后使用中心元素添加margin: 0 auto;

来源

2011-02-06 22:02:20 gearsdigital

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

回答

相关问题