Question

我有这段代码：

我希望侧边栏显示在主要内容的右侧，该内容应该保持在页面的中心位置。

我尝试设计此页面，以便主要内容将以页面为中心，以及侧栏，我可以在其中显示垂直横幅广告。

有人可以帮忙吗？：）

感谢。

这是HTML：

<div id="header">

     <div id="main">
          <div id="inner">

          </div>
     </div>  
     <div id="sidebar"></div>    
</div>  

<div id="footer"></div>

CSS：

body {
    margin:0; 
    height:100%;
}


#header{
    background-color:#f0f0f5; 
    padding-right:10px; 
    padding-left:10px; 
    font-family:Arial, 
    sans-serif; 
    font-size:14px
}

#main {

    padding-bottom:20px; 
    margin:0 auto; 
    max-width:784px; 
    height:100%;
}

#inner {

    border:1px solid #c9c9c9; 
    padding:20px 20px;  
    color:#44423c; 
    background-color:#fff
}

#sidebar {

    width:200px;
}

#footer {
    background-color:#d3d3d3;
    padding-bottom:18px; 
    padding-top:18px; 
    margin:0 auto; 
    max-width:1030px
    font:normal 14px/1em Arial, sans-serif; 
    color:#727272; 
    text-align:center;
    clear: both;
}

Answer 1

将这些添加到您的代码中。 Example Fiddle

#sidebar {
  float: right;
}

#inner {
  float: left;
  width: 584px;
}

此外，您应该更改代码以使用语义html，例如：

<header>
</header>

  <main>
    <article>
    </article> 
    <aside>
    </aside>
  </main>

<footer>
</footer>

此外，您需要在启动#main div之前结束#header div。

头

<div id="header">Header</div>

<div id="main">
  <div id="inner">
    Inner Content
  </div>

  <div id="sidebar">
    Sidebar Content
  </div>
</div>

<div id="footer">Copyright Website Blah Blah </div>

Answer 2

您可以使用位置：已修复

在 #sidebar ID上添加：

 position: fixed;
 right: 0px;
 top: 50%;

Fiddle Solution

中心主要内容右侧的边栏

2 个答案: