2011-05-07 159 views
1

(我問了一個類似的問題here,在某些情況下發現了一個工作解決方案,但是這個設計窘境的參數已經改變了,所以我決定開始一個新的線程)css/js - 垂直對齊圖像旁邊的文本塊

我試圖找到一種方法 - 無論是通過純CSS或JavaScript的幫助 - 垂直對齊圖像旁邊的多行文本塊,如here所示。如演示中所示,文本塊的高度比圖像的高度小,所以我希望它在中間浮動(就像表格佈局中的默認值一樣)。我的情況中的關鍵點是能夠爲了實現這種效果,沒有爲包含div定義高度 - 即只定義圖像高度 - 因爲我基本上試圖用小圖像和描述性文本構建一個長縮略圖列表 - 並且需要定義一個每個包含div的高度都是有問題的。

對我來說,使用表格這麼容易實現的東西就是通過CSS實現的這麼大規模的工作,以及我通過google發現的無數解決方案,大多數純CSS方法以及許多JS輔助方法都需要容器的高度聲明。另外,方便的「display:table-cell」css方法在IE中不起作用。

我願意接受任何解決方案,例如。通過jQuery等 - 感謝任何幫助;我想其他人也會從揭露這個問題的工作解決方案中受益。

回答

1

這不正是你所需要的嗎? http://jqueryui.com/demos/position/

編輯:工作演示:http://jsfiddle.net/c0mm0n/v4BNQ/1/

+0

感謝您的答覆c0mm0n,我只是不太瞭解如何使用這個工具... – nickpish 2011-05-07 03:50:30

+0

我嘗試去撥弄它,看起來基本,也許我錯過了一些東西:) – c0mm0n 2011-05-07 03:59:47

+0

它是一種令人難以置信的想法,它是如何看似難以找到一個可靠的跨瀏覽器解決方案來解決這個問題......我很長時間沒有使用過表格,但在這裏很誘人因爲它需要30秒 – nickpish 2011-05-07 04:05:34