我試圖實現以下佈局而不使用javascript並且不使用表格:垂直對齊到父div的頂部和底部
頁面上有很多行。每行由四個內容元素填充,其中最高的元素決定了行的高度。每個內容元素都有兩個其他元素,在這種情況下是圖像和標題。圖像與行的頂部對齊,而標題與底部對齊。
在HTML結構中,圖像和標題必須一起放在內容元素中。
一些解決方案,我已經試過:
分割每行分爲兩個:圖像的行和字幕的一排,從分離的字幕圖像。
使用着名的equal height column div結構導致一個醜陋的絕對定位Matryoshka娃娃安排divs。
表格的問題在於,將來頁面會變得更加動態(可重新加標籤的內容,流體佈局,動態搜索,不同寬度的內容),並且表格會非常煩人。
如果我正確地想象它(得到一個圖像?)對於純CSS來說聽起來很棘手。你需要支持舊版瀏覽器嗎?爲了讓頁面「在未來更加動態」,我假設你將使用JavaScript,那麼爲什麼不使用JavaScript來幫助佈局? – thirtydot 2012-07-25 22:31:43
您的瀏覽器要求是什麼?你能夠使用一些新的CSS3網格和flexbox屬性嗎? – 2012-07-25 22:53:42