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

你需要“浮动”你的一个容器并移除你的“左边缘”。

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

在你的HTML中我没有看到论坛的Div ...你需要添加一个浮点数：如果你希望它们彼此相邻，可以添加到#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 3

如果两个容器的高度相同，则可以使用以下样式：

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

Answer 4

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

.clear {
clear:both;
}

托马斯建议将论坛div浮动到右边。

祝你好运。

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

4 个答案: