为什么我的CSS效果是这样的？（不是我想要的）

我的test.html：为什么我的CSS效果是这样的？（不是我想要的）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<link rel="stylesheet" type="text/css" href="test.css" /> 
<title>test</title> 
</head> 
<body> 
    <div id="header">header</div> 

    <div id="container"> 
     <h1>content</h1> 
     <p>test</p> 
     <p class="last">...</p> 
    </div> 

    <div id="sidebar"> 
     <h1>sidebar</h1> 
     <ul> 
     <li>link one</li> 
     <li>link two</li> 
     </ul> 
    </div> 

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

我test.css：

@CHARSET "ISO-8859-1"; 
#header { 
    background: #d7dabd; 
} 
#container { 
    width: 100%; 
    float: right; 
    margin-left: -200px; 
} 
#sidebar { 
    width: 200px; 
    float: left; 
} 
#footer { 
    background: #d7dabd; 
    clear: both; 
}

最终效果是： enter image description here

我希望#sidebar左侧和页面右侧的#container。但它们在混合左

来源

2011-04-13 Mellon

的'保证金左：-200px;'是什么导致它。 – drudge 2011-04-13 07:46:52

是的，但使用'width：100％'会使'＃容器'div溢出窗口... – 2011-04-13 07:52:29

只需从CSS中删除width: 100%;为#container，它应该看起来像你想

这里有一个演示 http://jsbin.com/ohebo3

来源

2011-04-13 07:58:18

尝试删除离开了切缘阴性，和 - 可能 - 宽度

来源

2011-04-13 07:48:24

首先，改变的div的顺序，使侧边栏至上：

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

<div id="sidebar"> 
    <h1>sidebar</h1> 
    <ul> 
    <li>link one</li> 
    <li>link two</li> 
    </ul> 
</div> 

<div id="container"> 
    <h1>content</h1> 
    <p>test</p> 
    <p class="last">...</p> 
</div> 

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

然后使左侧的容器和侧栏浮动：

#container { 
    float: left; 
} 
#sidebar { 
    width: 200px; 
    float: left; 
}

来源

2011-04-13 07:49:59

如果将侧边栏div放在HTML内容div之前，会更容易。

来源

2011-04-13 07:52:14

你可以把#sidebar DIV的#container的DIV中。

例子：http://jsbin.com/ogobe4

来源

2011-04-13 08:15:15

这里被修改为一个简单的流体布局你的CSS。

演示：http://jsfiddle.net/W6T6n/


#container 
{ 
    width: 75%; 
    float: right; 
} 
#sidebar 
{ 
    width: 25%; 
    float: left; 
}

来源

2011-04-13 08:18:46 wdm

为什么我的CSS效果是这样的？ （不是我想要的）

回答

相关问题

为什么我的CSS效果是这样的？（不是我想要的）