为什么我的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

不是我想果是

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

问题描述

解决方法

相关问答

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