Question

我的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>

my 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。但他们在左边混合

Answer 1

尝试删除左边的负边距， - 可能 - 删除宽度

Answer 2

首先，更改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;
}

Answer 3

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

Answer 4

只需从width: 100%;的css中删除#container，它就会显示为您想要的

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

Answer 5

您可以将#sidebar div放在#container div中。

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

Answer 6

这是为简单的流体布局修改的CSS。

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


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

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

6 个答案:

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

6 个答案:

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