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定位问题。无法添加第二个侧边栏

回答

相关问题