如何解决为什么我的CSS效果是这样的? 不是我想要的
| 我的test.html:<!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;
}
最终效果是:
我希望页面左侧显示#sidebar,右侧显示#container。但他们混在左边
解决方法
只需将css中的
width: 100%;
移出#container
,它看起来就应该像您想要的
这是一个演示
http://jsbin.com/ohebo3
,尝试删除左侧的负边距,以及-可能-宽度
,首先,更改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;
}
,如果将侧边栏div放在HTML中的内容div之前会更容易。
,这是修改后的CSS,以实现简单流畅的布局。
演示:http://jsfiddle.net/W6T6n/
#container
{
width: 75%;
float: right;
}
#sidebar
{
width: 25%;
float: left;
}
,您可以将#sidebar div放入#container div中。
示例:http://jsbin.com/ogobe4
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。