html - 如何将一个容器放在另一个容器旁边？

Question

我试图把我的容器（盒子）放在我的另一个容器（盒子）旁边。他们最终不是彼此相邻，而是彼此之上/之下。我希望它们彼此相邻而不是这样。

这是我的代码；

<div id="blog">
<img src="images/mlblog.png">
  <img src="images/mltownareaconcept.png" style="width: 300px; height: 100px;">
    <p>Check out the town area concept!</p>
    <p><a href="http://community.mooselounge.me/blog/">Click here to read the blog!</a></p>

#blog {
  background: url(-) repeat;
  width: 300px;
  height: 250px;
  border: 2px solid #855E42;
  margin-left: 200px;
  margin-top: 50px;
}

#forums {
  background: url(-) repeat;
  width: 300px;
  height: 250px;
  border: 2px solid #855E42;
  margin-left: 900px;
  margin-top: 0px;
}

你知道我该如何解决这个问题吗？谢谢！

Answer 1

在您的 HTML 中，我没有看到论坛的 Div...如果您希望它们彼此相邻，您需要将 aa float:left 添加到 #blog 和 #forums

#blog {
background: url(-) repeat;
border: 2px solid #855E42;
float: left;
margin-top: 50px;
width: 300px;
height: 250px;
}

#forums {
background: url(-) repeat;
border: 2px solid #855E42;
float:left;
margin-top: 50px;
width: 300px;
height: 250px;
}

<div id="blog">Your code...</div>
<div id="forums">Your code...</div>

Answer 2

您需要“浮动”您的一个容器并删除您的“margin-left”。

#blog {
  background: url(-) repeat;
  border: 2px solid #855E42;
  float: left;
  margin-top: 50px;
  width: 300px;
  height: 250px;
}

#forums {
  background: url(-) repeat;
  border: 2px solid #855E42;
  margin-top: 50px;
  width: 300px;
  height: 250px;
}

Answer 3

如果两个容器的高度相同，您可以使用这种样式：

#blog, #forums { display: inline-block; }

Answer 4

在博客和论坛下方添加一个清算 div。

.clear {
clear:both;
}

Thomas 还建议将论坛 div 向右浮动。

祝你好运。