每边都有侧边栏?

时间:2012-12-12 18:48:57

标签: html css html5 css3

我知道这应该是一件简单的事情,但我有很多编码,我认为有些东西可能会干扰这一点。我试图在内容的每一侧做一个薄侧边栏。也许用于广告或其他东西。

以下是代码:

<div id="content">
    <article>
       This is a test.
    </article>
</div>
    <aside id="space">
        Hello.
    </aside>

它有什么问题吗?

修改 我知道这不是两个侧边栏。我需要先做一件工作,哈哈。

这是带有它的CSS,如果有帮助的话:

#content{
    float: left;
    width: 1366px;
    height: 350px;
}
article {
    background: #F5F5F5;
    border: 1px solid grey;
    padding: 10px;
    margin: 0px 325px;
    height: 325px;
    width: 660x;
    -webkit-box-shadow: rgb(110,110,110) 5px 5px 100px inset;
}
#space{
    float: left;
    width: 20px;
    height: 40px;
    margin: 10px 0px;
    padding: 20px;
    background: #66CCCC

1 个答案:

答案 0 :(得分:1)

这就是你想要的吗?

<强> HTML

  <aside id="left">
     left
  </aside>

  <div id="content">
     <article>
         This is a test.
     </article>
  </div>

  <aside id="right">
     right
  </aside>

<强> CSS

  body {
      width: 80%;
      margin: 0 auto;
  }

  #left, #content, #right {
     float: left;

      text-align: center;
  }

  #left, #right {
      width: 15%;
      background-color: #eee;
  }

  #content {
      width: 70%;
      background-color: #aaa;
  }

http://jsfiddle.net/fYFX6/

如果需要,可以在侧边栏中添加边距。