我在海誓山盟旁邊有三個div,沒有內容,他們對齊完美。 但是,一旦我將另一個div放入第一個div,另一個div(中間和右側)被壓下。內部的div比他的父母(左邊的)小,所以我不明白爲什麼它會下降。靠近海誓山盟的三個div,推動他人下降的內容
這是全球包裝:
.main-content {
width: 1100px;
min-height: 500px;
margin: auto;
margin-top: 100px;
}
左格:
.left-menu {
width: 250px;
height: 100%;
margin-left: 20px;
margin-top: 30px;
background-color: rgba(255, 255, 255, 0.95);
display: inline-block;
}
中間:
.main {
width: 500px;
min-height: 500px;
background-color: rgba(255, 255, 255, 0.95);
display: inline-block;
margin-left: 20px;
}
而正確的div:
.right-pane{
width: 250px;
margin-left: 15px;
margin-top: 30px;
background-color: rgba(255, 255, 255, 0.95);
display: inline-block;
}
目前他們是類而不是編號,但這應該沒有什麼區別,我猜?
現在,一旦我們把類似下面的內左菜單中的其他2一個div被下推:
<div class="leftmenu-item">
<p class="redtext">This is a quite a long sentence hehehe</p>
<p class="datetext">Date: 25-07-2013</p>
<p class="timetext">Time: 13:00</p>
</div>
CSS:
.leftmenu-item {
height: 100px;
width: 200px;
}
其他類的段落只設置字體類型和顏色。
所以整個結構是這樣的:
<div class="main-content">
<div class="left-menu">
<div class="leftmenu-item">
<p class="redtext">This is a quite a long sentence hehehe</p>
<p class="datetext">Date: 25-07-2013</p>
<p class="timetext">Time: 13:00</p>
</div>
</div>
<div class="main">
Testy
</div>
<div class="right-pane">
Hello.
</div>
</div>
我使用浮動嘗試,但都不盡如人意無論是。如果有人知道一個解決方案,我會很高興
更好[小提琴](http://jsFiddle.net)這個。 – Boaz
將'vertical-align:top;'添加到這些div。 – avrahamcool
heh @avrahamcool做了詭計,請發表帖子,以便我可以接受 – Gooey