0

今日作成したサンプル Web ページに 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;
}

左にフローティングするサイドバーを1つ追加できました。しかし、右側のサイドバーに別の div を作成し、'body' の幅を 960px から 1400px に増やすと、フットバーが右側にあることがわかります。なんで？フットバーを一番下にのみ設置したい。私の質問は、なぜフッターが右に移動したのですか? そして、それに対する解決策は何ですか？

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

float 要素を使用する場合は、このフローティングをクリアする必要があります。

HTMLコード

  <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 に答える