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 溢出 : auto not working on IE

css - 空单元格在 CSS3 中有效吗?

css - ion-footer-bar 中的按钮重叠

android - 什么是 "android.R.layout.simple_list_item_1"?

html - z-index 和定位

javascript - 带有 Python 的 Selenium Webdriver : Element is not clickable & Cannot read property 'click' of null

css - Firefox 文件上传框比 Chrome/IE/Safari 大 - 如何解决? - 使用尺寸(HTML)和宽度(CSS)参数

css - 如何创建固定标题和 100% 内部容器?

CN1 中预览应用程序和运行应用程序之间的布局构成不同

javascript - 加载时间值得执行时间吗?