CSS：如果垂直空間可用，則爲「float：bottom」。「float：left」otherwise

如果瀏覽器窗口中有足夠的垂直空間，我有兩個應該垂直堆疊的非常窄的（寬度：400像素）div。如果瀏覽器高度太小，並且右側有足夠的空間，則「底部div」應該浮動到頂部div的右側。CSS：如果垂直空間可用，則爲「float：bottom」。「float：left」otherwise

從某種意義上說，我要求的是「float：left」的相反意思。 float：如果瀏覽器窗口中有足夠的水平空間，則將div水平對齊，並且只在其下方有可用空間的情況下，將div放在其他區域下方。

感謝您的任何建議！

來源

2012-06-08 Jonas Lindeløv

如果右側有空間並且底部有空間會怎麼樣？ – Jashwant

不要以爲只有CSS才能做到這一點。我想你可能不得不涉及一些Javascript。讓窗口高度的JS測試onresize，然後計算有多少空間。然後適當地爲每個div應用樣式（'float：left;'和/或'clear：both;'） –

Jashwant：將div放在另一個下面總是首選。所以只有在右邊有空間但不在底部的情況下，div2應該在div1的右邊。 –

根據您所需要的瀏覽器支持的水平，一個簡單的媒體查詢可以解決你的問題：

<!doctype html> 
<html> 
    <head> 
     <style> 
      /* SET THE DEFAULT RULES FOR SHORT SCREENS */ 
      .bottom-floaty { 
       height:200px; 
       width: 400px; 
       margin: 15px; padding: 10px; 
       outline: 1px dashed #aaf; 
       } 
      /* HERE FOLLOWS THE MAGICAL MEDIA QUERY FOR TALL SCREENS */ 
      @media all and (max-height: 500px) { 
       .bottom-floaty { float:left; } 
      } 
     </style> 
    </head> 
    <body> 
     <div class="bottom-floaty"> 
      I'm a sometimes floaty div 
     </div> 
     <div class="bottom-floaty"> 
      I'm also a sometimes floaty div 
     </div> 
    </body> 
</html>

這是我與看到的效果： In a tall window In a short window

CSS3媒體查詢可讓您根據視口高度設置您喜歡的任何規則CSS。 The w3c has lots of information about media queries.

關於視口高度的相關片段：

的「高度」媒體特徵描述了輸出設備的目標的顯示區域的高度。對於連續媒體，這是視口的高度，包括渲染滾動條的大小（如果有的話）。對於分頁媒體，這是頁面框的高度。

指定的不能是負數。

有時我發現Mozilla開發人員網絡更容易訪問，但在這種情況下，他們提供basically the same information。

您是否需要支持無法呈現媒體查詢的舊瀏覽器？它應該是相當簡單的寫一個JavaScript polyfill可以有相同的效果，特別是使用像jQuery庫。

編輯

我修改我的代碼示例，以更符合您的問題。您評論過：

Jashwant：將div放在另一個下面始終是首選。所以只有在右邊有空間但不在底部的情況下，div2應該在div1的右邊。 - 喬納斯

而且我也將寬度設置爲400px，如你的例子。

現在只有當屏幕太短而不能豎直時，纔會向左浮動和右側有足夠的空間以適合兩者。否則，它總是垂直的。

來源

2012-06-08 14:33:11 Phil

非常感謝，菲爾！畢竟，有一個美麗的解決方案。如果可以的話，我會三次提出這個答案。非常徹底，切實可行。 –

如果你不想使用float:left;屬性，你的每個DIV都會下降到新的行。所以使用float左邊的屬性。當你想換行只是使用clear:both;

來源

2012-06-08 12:55:58

這是一個好主意。 – 2012-06-08 13:03:33

謝謝你的建議，莎拉。然而，它並沒有解決的問題是，如果底部沒有空間並且右側有空間，那麼想要div2保持默認情況下保持在底部但是向右移動。似乎人們必須用David的javascript建議來建立您的主張（請參閱對問題的評論）。 –

CSS：如果垂直空間可用，則爲「float：bottom」。 「float：left」otherwise

回答

相關問題

CSS：如果垂直空間可用，則爲「float：bottom」。「float：left」otherwise