根據容器大小水平堆疊div

Question

如果不適合在容器中放置div，是否有CSS（3）技巧可以水平堆疊div？ 如果容器小於div的寬度之和，則它們應彼此重疊，第一個對齊到左側，最后一個對齊到右側，直到容器太小則只能看到一個div。

我想到了一張桌子或一張桌子，但沒有得到理想的結果。

如果CSS無法做到這一點，我將尋求jQuery的JS解決方案。 這會比較容易，但不如CSS好。

Answer 1

為了使其適合內聯，使用了： display: inline 。

如果它們不適合，則可以將max-width用於子元素。 或者，您可以使用width: 90%作為子元素，因此它總是填充並縮小到父元素的90％。

否則，在CSS3中，您可以使用媒體查詢來檢測當前瀏覽器的大小，然后更改屬性。

您無法檢查CSS中元素的寬度或高度，因為這將需要JS或jQuery。

在jQuery中，只需使用以下命令：

$('selector').css('width');

並使用它！ 然后使用z-index它們全部重疊，以便它們的寬度小於它們時彼此重疊:)或嘗試設置某種max-width以使它們與當前大小對齊。

但是您可以使用CSS3 Media Queries檢查瀏覽器的大小，以便您現在知道元素的大小並更改它們的屬性！ 如果您不想使用jQuery，而想要使用CSS，則可以使用CSS3 Media Query。 但這並不是那么有效，因為您將獲得設備及其屏幕的寬度，而不是元素的寬度。