Question

我在一些文本中添加填充到两个div列（内容，侧边栏）。补充工具栏在“内容”列下移动。

我还在学习（虽然我想我想把自己想象在初学者和中级之间）。

现在，我正在使用蓝图框架进行布局。我的内容列为15，侧栏为8。每当我尝试在每个DIV的右侧添加填充时，它会使侧栏在内容下移动。

我能找到的唯一解决方法是设置侧边栏列的宽度并使其向右浮动。

我认为Blueprint的目的是为了让我不必为列设置任何内容，只需将列类添加到需要它的每个div中？

这是一个小提琴：jsfiddle

这是我的HTML：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>CogRobot Studios</title>
    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/screen.css" />
    <!--[if IE]>
     <link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection">
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="stylesheets/cogrobot.css" />
  </head> 

  <body>
    <div id="wrap" class="rounded-corners container">
    <div id="header" class="rounded-corners column span-24 last">
      <img src="images/header.gif" alt="Starbuzz Coffee header image" />
    </div>

    <div id="content" class="column span-15 colborder last">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

    </div>

    <div id="sidebar" class="column span-8 last">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. 
      </p>

    </div>

    <div class="rounded-cornersbottom" id="footer">
      &copy; 2005, Lorem ipsum dolor sit amet.
      <br />
      All trademarks and registered trademarks appearing on 
      this site are the property of their respective owners.
    </div>
    </div>

  </body>
</html>

这是我的CSS：

#wrap{
    position: relative;
    top: 100px;

    }

    body { 
  /* background-color: #b5a789;*/
  font-family:      Georgia, "Times New Roman", Times, serif;
  font-size:        small;
  margin:           0px;
}

    p, ul, li, h1, h2, h3, h4 {
    margin: 0;
}

    h3 {
    margin: 0 0 20px 0;
    padding: 0 0 5px 0;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

    #header {
  background-color: #838383;
  width:            950px;
  height:           150px;
}

    #content{
 background:       #c8c8c8;
 font-size:        105%;
 padding: 20px 20px 20px 20px;
 margin: 0;
 width: 590px;

}

    #sidebar {
  float: right;
  background:       #c8c8c8;
  font-size:        105%;
  padding: 20px 20px 20px 20px;
  margin: 0;
  width: 260px;
}

    #footer {
  background-color: #838383;
  color:            #c8c8c8;
  text-align:       center;

  font-size:        90%;
  clear:            left;
}

    h1 {
  font-size:        120%;
  color:            #954b4b;
}

    h2 { 
    font-size: 110%; 
}

    .slogan { 
    color: #954b4b; 
}

    .beanheading {
  text-align:       center;
  line-height:      1.8em;
}

    a:link {
  color:            #b76666;
  text-decoration:  none;
  border-bottom:    thin dotted #b76666;
}
    a:visited {
  color:            #675c47;
  text-decoration:  none;
  border-bottom:    thin dotted #675c47;
}

    .rounded-corners {
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;

    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;

    -khtml-border-radius: 20px;
}

    .rounded-cornersbottom {
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-bottomright: 20px;

    -webkit-border-bottom-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;

    -khtml-border-radius: 20px;
}

Answer 1

您可以尝试设置您想要使用的元素的z-index 最佳。 z-index从-100到+100，所以你有足够的空间合适的元素。

Answer 2

我不知道蓝图。

但是，我做了以下工作，似乎就像我认为你想要它一样

制作sidebar和content float:left
从sidebar div中取出content并将其放在自己的
删除额外的结束</div>
更改sidebar和content的宽度，每个更改10px（您可能需要更多地使用它。）
在页脚上使用clear:both

示例： http://jsfiddle.net/5q8Xm/3/embedded/result/

Answer 3

我想我想出了如何解决问题，或者更确切地说，我弄清楚为什么它会弄乱它的方式。

由于我在HTML和CSS中有点生疏，我忘了填充会增加元素的大小。所以，因为我设置了蓝图以给整个布局24列，我认为给内容div 15列和侧边栏div 8是个好主意。因此，在内容div和内容div之间给出1个列空间侧栏div。

所以当我在文本周围添加填充时，它会使div更大（至少根据我的理解。

所以我通过将侧栏从8列减少到7列来解决这个问题。给填充足够的空间，不要在内容div下跳下来。

我希望这是一个很好的解决方案，如果有更有效/正确的方法，我很乐意听到。

将某些文本周围的填充添加到两个div列（内容，侧边栏）中。侧栏列在“内容”列下移动

3 个答案: