Question

我无法在今天制作的示例网页中添加2个侧边栏。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0045)http://csseasy.com/layouts/fixed/1column.html -->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <link rel="stylesheet" type="text/css" href="style2.css" />

  <title>CSSeasy.com example page</title>
</head>

<body>
  <div id="header"></div>

  <div id="content"></div>

  <div id="ltsidebar"></div>

  <div id="rtsidebar">
    <div id="footer"></div>
  </div>
</body>
</html>

CSS

body
{
    width:1400px;
}

#header
{
    background-color:#666;
    height:150px;
    margin-left:250px;
    width:750px;
}

#content
{
    background-color:#666;
    height:auto!important;
    margin-bottom:20px;
    margin-left:250px;
    margin-top:20px;
    min-height:500px;
    width:750px;
}

#footer
{
    background-color:#666;
    height:100px;
    margin-left:250px;
    margin-top:0;
    width:750px;
}

#ltsidebar
{
    background-color:#666;
    float:left;
    height:300px;
    margin-bottom:20px;
    margin-top:-500px;
    width:200px;
}

#rtsidebar
{
    background-color:#666;
    float:right;
    height:300px;
    margin-bottom:20px;
    margin-right:160px;
    margin-top:-500px;
    width:200px;
}

我能够在左边添加一个侧边栏。但是当我为右侧边栏制作另一个div时，并且将'body'宽度从960px增加到1400 px然后我看到右边的右边栏。为什么？我希望脚踏板仅位于底部。所以我的问题是为什么页脚向右移动？它的解决方案是什么？

Answer 1

尝试将页脚放在底部：

  <div id="header"></div>

  <div id="content"></div>

  <div id="ltsidebar"></div>

  <div id="rtsidebar">

  </div>
  <div id="footer"></div>

我已将页脚div部分移出rtsidebar并将其放在rtsidebar下方。

Answer 2

如果您使用浮动元素，则必须清除此浮动元素。

HTML CODE

  <div id="header"></div>
  <div class="wrapper">
      <div id="ltsidebar"></div>
      <div id="content"></div>      
      <div id="rtsidebar">
  </div>   
  <div id="footer"></div>

CSS代码

body
{
    width:1400px;
}

#header
{
    background-color:#666;
    height:150px;
    margin: 0 auto;
    width:750px;
}

#content
{
    background-color:#666;
    height:auto!important;
    margin: 20px 125px;
    min-height:500px;
    width:750px;
    float: left;
}

#footer
{
    background-color:#666;
    height:100px;
    margin: 0 auto;
    width:750px;
    clear: both;
}

#ltsidebar
{
    float:left;
    width:200px;
    height:300px;
    background-color:#666;
}

#rtsidebar
{
    float:right;
    width:200px;
    height:300px;
    margin-bottom:20px;
    background-color:#666;  
}

<强>样本

http://jsfiddle.net/SmXKj/2/

CSS定位问题。无法添加第二个侧边栏

2 个答案: