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

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

html css

Html 为什么我的CSS效果是这样的？（不是我想要的）,html,css,Html,Css,My 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

My 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>

最后的效果是：

我希望侧边栏在页面的左侧，容器在页面的右侧。但它们在左侧混合，请尝试删除左侧的负边距，并且-可能的话-首先是宽度，更改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>

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

只需删除宽度：100%；从容器的css，它应该看起来像你想要的

这里有一个演示

您可以将边栏div放在容器div中

示例：

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

演示：

左边距：-200px；是的，但是使用宽度：100%会使容器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;
}


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