将一些文本周围的填充添加到两个 div 列（内容、侧边栏）中。侧栏列移动到内容列下方答案

【问题标题】：Adding padding around some text into two div columns (content, sidebar). Sidebar column moves under the Content column将一些文本周围的填充添加到两个 div 列（内容、侧边栏）中。侧栏列移动到内容列下方
【发布时间】：2012-03-10 01:48:51
【问题描述】：

我正在将一些文本周围的填充添加到两个 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;
}

【问题讨论】：

把它放到jsfiddle.net。

标签： html css blueprint-css

【解决方案1】：

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

【讨论】：

只有y 维度表示“下”。没有重叠。
z-index 不限于 -100 到 +100。 stackoverflow.com/a/491105/870729
啊。对不起。我的 HTML/CSS 不是 新鲜的。大约一个月以来，我没有使用过 HTML，也没有使用过 CSS。同时，我想我会试着想一个答案。不过，感谢cmets。学到了新东西^_^
似乎不起作用。从侧边栏中删除宽度并将 z-index 添加到 99 后，由于（我在这里假设）侧边栏中的填充，它仍然跳到底部。 >:
你的答案在一个块引用中 - 来源在哪里？

【解决方案2】：

我对蓝图一无所知。

但是，我执行了以下操作，它似乎按照我认为您想要的方式工作

同时创建sidebar 和content float:left
从content div 中取出sidebar 并将其单独放置
删除额外的关闭</div>
更改sidebar 和content 的宽度，每个降低10px（您可能需要更多地摆弄这个。）
在页脚使用clear:both

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

【讨论】：

J 在内容 div 中没有侧栏 div，或者至少我不打算让它在那里。

【解决方案3】：

我想我找到了解决问题的方法，或者更确切地说，我知道为什么它会搞砸了。

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

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

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

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

【讨论】：