自適應設計，隨機高度n列的portlet

如何制定出N個隨機高度的列的portlet都在CSS，這樣如果瀏覽器的大小時的數量是減少的列（使用@媒體（最小寬度:)），並且portlet仍然在頁面上很好地放置在一起，沒有間隙。

這與 Float multiple fixed-width/varible-height boxes into 2 columns 類似，但更一般。

詳細信息：

我已經建立了一個Web應用程序（PHP/Zend框架）與取得了一系列的portlet的「儀表板」頁面。這些portlet可以排列成1,2,3或4個相等寬度的列（用戶可選擇）。當用戶調整瀏覽器窗口大小時，列會擴展以填充可用寬度，並且portlet也會水平擴展。每個portlet的垂直高度由其內容定義。有些只有1-2行，其他可以是30-40行+文本/表格/圖像等。

我想把它變成一個「響應式設計」，以便用戶不必選擇列數。在小屏幕上（例如iPhone）只會顯示一列。在寬屏幕上，他們可能有4或5列。如果瀏覽器窗口調整大小，列數將調整爲上或下以允許Portlet保持大約300-400像素寬。我想我可以用一點jQuery和一些服務器端支持（PHP）來做到這一點，但如果可能的話，寧願在CSS中做所有事情（沒有/最小的JavaScript）。

來源

2011-11-17 Steve

可以顯示想要的圖形示例嗎 – sandeep

如果有三個portlet會怎麼樣？當你縮小屏幕時，你會期望在第一行中有兩個portlet，在下面或三個堆疊的portlet中有兩個portlet？ – mrtsherman

@mrtsherman：在1列模式下，它們將全部在彼此之上;在2列模式中，一列中有2個，另一列（另一個無關緊要，但如果我們可以以某種方式調整它們的高度，那麼它們就會很酷，例如同一列中的兩個最短的那個）。在3列模式下，每列將有一個;在4列模式下，應該填寫最左邊三列。 – Steve

使用的媒體查詢和文本對齊方式的組合來實現這一點：

在自然狀態下，「文本對齊：證明」不會工作，除非該行的內容是足夠長，以使越線。否則，文本保持左對齊。我們可以通過給線條末尾的不可見內聯元素賦予100％寬度來解決這個問題。因爲'text-align：justify'被設計用於處理單獨的內嵌單詞，所以它適用於任何內聯單元 - 更重要的是任何內嵌塊單元。

要解釋最後一行中所有可能數量的元素，您需要添加的「佔位符」元素的數量等於每行的最大元素數減2。應插入這些元素在網格的末端（在「break」元素之前，如果不使用僞元素來破壞該行），然後單獨放置。由於它們不佔用任何垂直空間，如果最後一行已滿或者您的網站響應並且每行元素數發生更改，則「佔位符」元素不會影響佈局。只要你有足夠的佔位符以獲得最廣泛的視角，你就會好起來的。

顯然，這具有一些語義含義 - 因爲沒有辦法使用僞元素創建任何佔位符。在最後一行總是具有最大數量的元素的網格上，我們根本不需要使用佔位符（只是暫停），但在大多數CMS情況下，它們是必需的，並且應該被硬編碼到HTML中。

通過簡單地向容器應用'text-align：justify'，並給出子元素的'display：inline-block'和一個百分比寬度，您再也不必處理水平邊距了！（哦，我提到過，當使用這個技巧時，你永遠也不需要再次使用你的元素的浮動，所以你可以揮手告別那些可恥的clearfixes並清除div！）

我們應該知道，當使用'display：inline-block'時，我們的元素將受到各種印刷CSS屬性的支配，包括字體大小，行高，垂直對齊和字間距。這些屬性將對佈局的空白有明顯的影響，但可以根據需要輕鬆調整或刪除。在99％的情況下，將「font-size：0.1px;」設置爲容器，將「vertical-align：top」設置爲子元素應該有效。

參考

來源

2013-12-05 02:52:21

自適應設計，隨機高度n列的portlet

回答

相關問題