2012-05-04 108 views
2

我試過各種組合的html元素和CSS來讓這個工作無濟於事。我如何完成以下任務?垂直對齊2個並排自動寬度DIV的內容

我有兩個並排的DIV,我想根據其內容的寬度自動調整大小(使用「display:inline-block」)。然後,我希望每個DIV的內容都對齊DIV的頂部(默認情況下,內容是底部對齊的)。內容是一些標籤(跨度)和文本(數據庫數據)。此外,這兩個DIV應該保持在菜單頁面左側的另一個DIV的右側。

MENU  AUTO   ANOTHER 
FIXED  WIDTH   COLUMN (DIV) 
WIDTH  DIV    ALSO 
DIV  ACCORDING  AUTO 
      TO    SIZED 
      CONTENTS  TOP-ALIGNED 
      TOP-ALIGNED  CONTENTS 
      CONTENTS  SOME 
      SOME   PADDING 
      PADDING TO  TO MY LEFT 
      MY LEFT AND  AND RIGHT 
      RIGHT 
+0

不知道爲什麼網站會不會給我一個工具條,用於固定我的穿幫,但其他人似乎是能夠做到這一點。謝謝! – birdus

+0

你可以做一個JSFiddle,或發佈一些代碼? – Teak

+0

你打我..我幾乎完成編輯它:p –

回答

5

你必須vertical-align:top父(列)DIV,還有span的內心本性。 display:inline-block使寬度和高度變爲自動(如內聯元素),正如你所說的,默認的垂直對齊是基線。

http://jsfiddle.net/EjdUf/1/

+0

我一直在閱讀vertical-align是爲內聯元素,而不是塊級別的元素,但我會嘗試這一點。 – birdus

+0

呵呵,除非我不明白我讀的是什麼,這看起來不太合適,但它似乎也行得通!謝謝! – birdus

+0

'display:inline-block'允許你定位一個內聯元素,但也可以設置僅用於塊級別的邊界,填充,寬度等內容。只是要小心,如果這是爲IE瀏覽器,因爲有支持IE8和以下(也許只是ie7和以下)的內聯塊值的問題, –