0

コンテナー (ボックス) を他のコンテナー (ボックス) の隣に置こうとしています。それらは互いに隣り合う代わりに、互いに上/下に配置されます。これより隣り合わせの方がいいです。

これは私のコードです。

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

これを修正する方法を知っていますか？ありがとう！

4

4 に答える 4

0

コンテナの 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;
}
于 2013-05-12T02:13:24.120 に答える
0

あなたの HTML には、フォーラムの Div が表示されません...#blog と #forums を隣同士に配置したい場合は、aa float: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;
float:left;
margin-top: 50px;
width: 300px;
height: 250px;
}

<div id="blog">Your code...</div>
<div id="forums">Your code...</div>
于 2013-05-12T02:30:56.883 に答える
0

両方のコンテナが同じ高さの場合、次のスタイルを使用できます。

#blog, #forums { display: inline-block; }
于 2013-05-12T02:34:26.883 に答える