如何將容器放在另一個容器旁邊？

我想把我的容器（盒子）放在我的另一個容器（盒子）旁邊。他們不是彼此相鄰，而是彼此高於/低於彼此。我寧願他們彼此相鄰，而不是這個。如何將容器放在另一個容器旁邊？

這是我的代碼;

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

你知道我怎麼能解決這個問題？謝謝！

來源

2013-05-12 Thomas

您需要「浮動」您的一個容器並刪除「保證金餘額」。

#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-12 02:13:24

謝謝，我曾嘗試過，但它不工作。但是，似乎我在語法上犯了一個錯誤。哈哈，古典。感謝您的幫助。 – Thomas 2013-05-12 02:23:43

在HTML我沒有看到一個div的論壇...您需要添加AA浮動：左#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>

來源

2013-05-12 02:30:56 Jgunzblazin

論壇有浮動：正確，因爲它們彼此相鄰。 – Thomas 2013-05-12 02:35:09

如果有相同的高度兩個容器的情況下，你可以使用這個風格：

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

來源

2013-05-12 02:34:26

下方添加博客和論壇清算股利。

.clear { 
clear:both; 
}

此外托馬斯建議浮動論壇div權利。

祝你好運。

來源

2013-05-12 22:02:00

如何將容器放在另一個容器旁邊？

回答

相關問題