将两个Div并排对齐

Question

我从来没有遇到过将div对齐在一起的问题，但是无论我怎么做都不起作用。我试过stackoverflow上的一些答案，但它们也没有起作用。我已经没有其他想法了。

我有两个div，一个是“content”，它显示在表中的所有主要信息。第二个是“sidebar”，它只有一些额外的废物，比如图片、twitter feed等。

这是我的CSS：

#content {
width: 580px;
height:auto;
}     

#sidebar {
width: 270px;
height:auto;
float:right;

我曾试过调整位置、边距以及将这两个 div 包含在另一个 - wrapper - div 中，但要么没效果，要么会出现其他问题。有趣的是，我正在重新编写我的旧网站，即使我复制了旧的属性，它仍然不能正常工作。大家有什么想法吗？

大家都可以开心地笑一下！哈哈

解决方案： 删除完全忘记的 div #clear！真是个笨蛋 :-P 现在我感到很愚蠢。 :-P

- Vetaxili

---

你可能需要添加一些具体的HTML代码。否则只能猜测。 - Yoshi

可能是重复的问题：如何使用CSS将3个div并排浮动 - sandeep

在谷歌和 Stack 上搜索这个关键词并得到很多答案是一件很常见的事情。 - sandeep

Answer 1

#content {
  background:#eee;
  width: 300px;
  height:auto;
  float: left;
}     

#sidebar {
  background:#c00;
  width: 200px;
  height:auto;
  float:left;
}

<div id="content">Content</div>
<div id="sidebar">Sidebar</div>

- Zoltan Toth

---

已经尝试过这个了，但它没有起作用。我真的不知道为什么，因为通常这是解决方案。 - Vetaxili

可能是您的页面或包装器不够宽，导致第二个“div”被推到第一个下面。 - Zoltan Toth

Answer 2

使用 float : left，下面是一个简单的示例说明浮动用法。

演示

考虑到你的情况，这个 CSS 应该能解决问题。

#content {
    float : left;
    width: 580px;
    height:auto;
}     
#sidebar {
    float : left;
    width: 270px;
    height:auto;
    float:right;

}

假设您有一个容器，其宽度大于#sidebar和#content元素的宽度之和。如果容器宽度较小，则它们将像演示中所示一样相互叠放。

- Ashwin Krishnamurthy

Answer 3

为了给出一个恰当的答案，我需要看到不止两个CSS id，还需要HTML页面和CSS文件，但我做了这个： JSFiddle 也许可以帮到你。

- Zuazua