Question

我的布局在主页上有一列以页面中间为中心。 .posts类包含在.home类中，该类包含在最大宽度为800px的.wrap类中。我希望添加第二个窄列或侧栏，例如120px，称为.sidebar类。如果我将.home类设置为最大宽度为600px并将侧边栏类设置为宽度为120，则它仍然会被推到页面底部，而不是.home类旁边。

这是一个关于jsfiddle的演示，其中包含来自jekyll的html和css http://jsfiddle.net/mjmitche/V4F6H/

如何获取.home类旁边的侧边栏？

HTML

  <div class="wrap">
      <a class="site-title" href="#">My Jekyll Blog</a>
    <nav class="site-nav"> 
      <div class="trigger">    
          <a class="page-link" href="http:google.com">blah blah</a>         
      </div>
    </nav>
  </div>
</header>

<div class="page-content">
    <div class="wrap">
       <div class="home">   
      <ul class="posts">  
      <li>
        <a class="post-link" href="#">This is a link to my post</a>
       <p></p>
      </li>
     </ul>
      </div>
     <div class="side-bar">
     </div>
   </div>
</div>

关键CSS

.wrap:before,
.wrap:after { content:""; display:table; }
.wrap:after { clear: both; }
.wrap {
  max-width: 800px;
  padding: 0 30px;
  margin: 0 auto;
  zoom: 1;
}
.page-content {
  padding: 30px 0;
  background-color: #fff;
}


.home h1 { margin-bottom: 25px; 
}
.home { max-width: 600px};
.sidebar{ width: 100px;}

Answer 1

向左浮动.home div，向右浮动.sidebar。

不幸的是，你的JSfiddle似乎没有完整的HTML，并且方式过多的CSS用于减少案例，因此我无法进行演示。

将侧栏添加到单个居中的列

1 个答案: