2012-07-25 223 views
0

我試圖實現以下佈局而不使用javascript並且不使用表格:垂直對齊到父div的頂部和底部

頁面上有很多行。每行由四個內容元素填充,其中最高的元素決定了行的高度。每個內容元素都有兩個其他元素,在這種情況下是圖像和標題。圖像與行的頂部對齊,而標題與底部對齊。

在HTML結構中,圖像和標題必須一起放在內容元素中。

一些解決方案,我已經試過:

分割每行分爲兩個:圖像的行和字幕的一排,從分離的字幕圖像。

使用着名的equal height column div結構導致一個醜陋的絕對定位Matryoshka娃娃安排divs。

表格的問題在於,將來頁面會變得更加動態(可重新加標籤的內容,流體佈局,動態搜索,不同寬度的內容),並且表格會非常煩人。

+0

如果我正確地想象它(得到一個圖像?)對於純CSS來說聽起來很棘手。你需要支持舊版瀏覽器嗎?爲了讓頁面「在未來更加動態」,我假設你將使用JavaScript,那麼爲什麼不使用JavaScript來幫助佈局? – thirtydot 2012-07-25 22:31:43

+0

您的瀏覽器要求是什麼?你能夠使用一些新的CSS3網格和flexbox屬性嗎? – 2012-07-25 22:53:42

回答

1

如果我正確地想象你的標記,也許這會爲你工作:

http://jsfiddle.net/Puppies4Life/Fd94X/1/

我絕對定位的.caption到.row的底部。由於.content的變化高度,我將它定位爲.row,而不是直接父級.content。圖像保留在文檔的流程中。我添加了一些額外的填充到.row的底部以解釋文本並將其置於簡單的明確修復中(I suggest using a better option in your production code

希望這有助於解決您的問題,或者可能會點燃一個或兩個想法!

+0

從來不知道浮子清理 - 你救了我幾個小時無用的工作,謝謝! – eugeneration 2012-07-26 12:37:52