html - 让两个 div 彼此相邻 float 时遇到一些问题

标签 html css layout

我知道这个问题已经被一遍又一遍地回答,但我找不到适合我的东西。我认为这与内容或侧边栏中缺少 display: 属性有关,但我不确定是什么。请看一下我的代码,看看是否能发现我的错误。

我很抱歉问这个问题,我确信有一些明显的答案,但我还没有发现它。

提前致谢

安迪

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

最佳答案

使用此 CSS

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

两个元素都应向左浮动,第一个元素将具有右侧边距。

关于html - 让两个 div 彼此相邻 float 时遇到一些问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7464051/

相关文章:

html - Bootstrap 移动垂直间距

android - 如何在 Android 线性布局中使按钮覆盖全屏宽度?

安卓工作室 : Creating landscape layouts

javascript - 正则表达式删除html标签和字符

javascript - 当电子邮件字段未填写时显示 Bootstrap 警报

html - 单个单词不会换行表中的日语单词

javascript - 反转图像的响应大小

javascript/Ajax 执行onload一个div

html - 如何等待 HTML 中的视频背景直到它完成然后查看正文部分的内容?

Java Swing JPanel 大小不起作用