0

我无法在我今天制作的示例网页中添加 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”宽度从 960 像素增加到 1400 像素时，我看到脚栏在右侧。为什么？我希望脚踏板仅位于底部。所以我的问题是为什么页脚向右移动？解决方案是什么？

4

2 回答 2

2

试试这个以将页脚保持在底部：

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

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

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

  <div id="rtsidebar">

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

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

于 2013-04-22T11:58:46.837 回答
0

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

代码

  <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/

于 2013-04-22T12:38:19.053 回答