爲什麼我的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效果是這樣的？（不是我想要的）