2013-10-07 50 views
1

我在海誓山盟旁邊有三個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> 

我使用浮動嘗試,但都不盡如人意無論是。如果有人知道一個解決方案,我會很高興

+3

更好[小提琴](http://jsFiddle.net)這個。 – Boaz

+1

將'vertical-align:top;'添加到這些div。 – avrahamcool

+0

heh @avrahamcool做了詭計,請發表帖子,以便我可以接受 – Gooey

回答

2

添加vertical-align:top;那些股利。

默認情況下,它們與其基線對齊。

1

這可能是一個錯字:

你已經錯過了類選擇爲main

+0

糟糕,複製粘貼錯字 – Gooey