Fatal编程技术网
  • html/
  • Html 在两个div列（内容、侧边栏）中添加一些文本周围的填充。侧边栏列在内容列下移动

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

html css

Html 在两个div列（内容、侧边栏）中添加一些文本周围的填充。侧边栏列在内容列下移动,html,css,blueprint-css,Html,Css,Blueprint Css,我在两个div列（content，sidebar）中添加了一些文本的填充。边栏栏列在内容列下移动 我还在学习（尽管我想我想我自己介于初学者和中级之间） 现在，我正在使用蓝图框架进行布局。我的内容栏在15，侧栏栏在8。每当我尝试在每个DIV的右侧添加填充时，都会导致侧栏在内容下方移动 我能找到的唯一修复方法是设置边栏列的宽度并使其向右浮动 我认为Blueprint的目的是不必为列设置任何内容，只需将column类添加到每个需要它的div 这是一把小提琴： 这是我的HTML： <!DO

我在两个div列（content，sidebar）中添加了一些文本的填充。边栏栏列在内容列下移动

我还在学习（尽管我想我想我自己介于初学者和中级之间）

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

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

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

这是一把小提琴：

这是我的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>
您可以尝试设置要启用的元素的
z-index
顶
z-index
从-100变为+100，因此您有大量的空间 适合的元素

您可以尝试设置要启用的元素的
z-index
顶
z-index
从-100变为+100，因此您有大量的空间 适合的元素

我对蓝图一无所知

然而，我做了以下工作，它似乎像我认为你想要的那样工作

  • 使
    侧栏和
    内容浮动：左
  • 将
    侧边栏
    从
    内容
    div中取出并单独放置
  • 删除额外的关闭
  • 更改
    侧边栏
    和
    内容
    的宽度，每种宽度降低10px（您可能需要进一步调整）
  • 在页脚上使用
    清除：两个
    • 示例：

    我不知道蓝图

    然而，我做了以下工作，它似乎像我认为你想要的那样工作

  • 使
    侧栏和
    内容浮动：左
  • 将
    侧边栏
    从
    内容
    div中取出并单独放置
  • 删除额外的关闭
  • 更改
    侧边栏
    和
    内容
    的宽度，每种宽度降低10px（您可能需要进一步调整）
  • 在页脚上使用
    清除：两个
    • 示例：

    我想我找到了解决问题的方法，或者更确切地说，我找到了为什么它会把事情弄得一团糟

    由于我对HTML和CSS有点生疏，我忘记了填充会增加元素的大小。所以，因为我已经设置了蓝图，为整个布局提供了24列，所以我认为最好将内容部分设置为15列，侧边栏部分设置为8列。因此，在content div和side bar div之间留出1列空间

    因此，当我在文本周围添加填充时，它使div变大了（至少在我看来是这样）

    因此，我通过将侧边栏从8列减少到7列来解决这个问题。为填充留出足够的空间，使其不会跳转到content div下

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

    我想我已经找到了解决问题的方法，或者更确切地说，我找到了为什么它会把事情搞砸的原因

    由于我对HTML和CSS有点生疏，我忘记了填充会增加元素的大小。因此，因为我已经设置了蓝图，为整个布局提供24列，所以我认为最好将内容div设置为15列，侧边栏div设置为8列。因此，在内容div和侧边栏div之间提供1列空间

    因此，当我在文本周围添加填充时，它使div变大了（至少在我看来是这样）

    因此，我通过将侧边栏从8列减少到7列来解决这个问题。为填充留出足够的空间，使其不会跳转到content div下

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

    把它挂上。挂上。只有
    y
    维度是“下”的意思。没有重叠。z-index不限于-100到+100。啊。抱歉。我的HTML/CSS不新鲜。我已经有一个月没有使用HTML或CSS了。我想我会在这期间尝试想出一个答案。不过，谢谢你的评论。学到了一些新东西。^^似乎不起作用。在从侧栏删除宽度并添加z之后-索引到99，它仍然跳到底部，因为（我在这里假设）侧栏中有填充物。>：您的答案在一个块引号中-来源在哪里？只有
    y
    维度是指“下”。没有重叠。z-index不限于-100到+100。啊。抱歉。我的HTML/CSS不新鲜。我已经有一个月没有使用HTML或CSS了。我想我会在这期间尝试想出一个答案。不过，谢谢你的评论。学到了一些新东西。^^似乎不起作用。在从侧栏删除宽度并添加z之后-索引到99，它仍然跳到底部，因为（我在这里假设）侧栏中的填充。>：您的答案在一个块引号中-源在哪里？J在内容div中没有侧栏div，或者至少我不希望它在那里。J在内容div中没有侧栏div，或者至少我不希望它在那里。 
    #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;
}