CSS定位問題。無法添加第二個側邊欄

我無法在今天所做的示例網頁中添加2個側邊欄。CSS定位問題。無法添加第二個側邊欄

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，並將「身體」寬度從960px增加到1400px時，則會看到該腳欄位於右側。爲什麼？我希望腳踏板只能坐在底部。所以我的問題是爲什麼頁腳向右移動？它有什麼解決方案？

來源

2013-04-22 mr-karan

你能make a [fiddle]（http://jsfiddle.net）？不要在px中定義'body'的寬度。 – Mooseman 2013-04-22 11:52:48

將你的頁腳移動到你的右側邊欄外似乎可以修復它，但我不知道我是否理解你的問題。無論如何，這裏是你的代碼小提琴（頁腳移出側邊欄）：http://jsfiddle.net/E3SMb/在你的問題中使用它，以幫助人們瞭解問題 – cernunnos 2013-04-22 11:55:29

是的，這是我所要求的。感謝您的解決方案 – 2013-04-22 12:47:20

如果你使用浮動元素，你必須清除這個浮動。

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; 
}

DEMO

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

來源

2013-04-22 12:38:19

謝謝:)雖然我從來沒有正確理解，多麼清晰的財產工程。任何不錯的教程？ – 2013-04-22 12:49:01

你能幫我這個http://stackoverflow.com/questions/23435681/unable-to-specify-css-position-fixed – 2014-05-02 19:46:17

試試這種方式來保持在頁腳底部：

<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-22 11:58:46 web2008

謝謝。它的工作:) – 2013-04-22 12:46:48

CSS定位問題。無法添加第二個側邊欄

回答

相關問題