Question

我知道这个问题已经被一遍又一遍地回答，但我找不到对我有用的东西。我认为它与缺少显示有关：内容或侧边栏中的属性但我不确定是什么。请查看我的代码，看看你是否能发现我的错误。

我为提出这个问题而道歉，我确信有一些明显的答案，但我还没有发现它。

提前致谢

安迪

    <html>
<head>
<title>Andy's test website</title>

<style type="text/css">
html, body
{
  margin:0px;
  padding:0px;
}

p
{
  margin:0px;
  padding:0px;
}

#container
{
  margin:0 auto;
  background-color:white;
  width:760px;
  border:1px solid gray;
}
#header
{
  line-height:130%;
  border-bottom:1px solid gray;
  width:760px;
}
#content
{
  float: left;
  width:500px;
  margin-right:260px;
}
#sidebar
{
  float: right;
  width:260px;
}
#footer
{
  clear:both;
  width:760px;
}

</style>

</head>

<body>
<div id="container">

  <div id="header">
    <h1>Hello World</h1>
  </div>

  <div id="content">

    <p>
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>

  </div>

  <div id='sidebar'>
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam,"
    </p>
  </div>

  <div id="footer">
    footer
  </div>
</div>

</body>
</html>

Answer 1

使用此CSS

  #content
  {
    float: left;
    width:480px;
    margin-right:20px;
  }
  #sidebar
  {
    float: left;
    width:260px;
  }

两个元素都应该向左浮动，第一个元素应该具有右边距。

Answer 2

问题在于您在margin上使用#content。边距为260px，#content的外部宽度变为760px，这是父#container的整个可用内部宽度。在页面流程中，您会在#sidebar下面看到#content，因为这两个元素并没有足够的空间并排存在。

从margin-right删除#content，事情应该按照您的需要显示。

请记住，此配置非常严格，当您引入任何可更改#content或#sidebar外部宽度的CSS属性时，此配置会再次中断（包括border，{ {1}}和padding。阅读CSS box model将有助于您更好地了解正在发生的事情。

让两个div相互浮动有些麻烦

2 个答案: