如何動態調整子元素的佈局到父容器的寬度？

我想實現的是相對於父容器寬度的自適應內部內容佈局。不太確定是否使用CSS媒體查詢是一種選擇，因爲它們指的是屏幕寬度而不是特定的容器寬度。我想要相同的代碼根據它包裝的容器顯示2,3或4列中的一組縮略圖。如何動態調整子元素的佈局到父容器的寬度？

我正在尋找一種「自動化」的方式，而不必手動使用CSS。換句話說，如果有意義的話，將使用「max-parent-container-width」而不是max-「device-width」的「響應式佈局」。

請問有沒有解決方法？

來源

2013-06-19 Ion

如果可能，一個簡單的方法是將一個類名放在父容器上。但要做到這一點，你需要知道如何在服務器上或通過JS顯示父項。我還沒有聽說過針對div的「類似媒體查詢」解決方案。

來源

2013-06-19 12:50:26

有一個稱爲Element Queries（元素查詢）的概念（http://www.xanthir.com/b4PR0）可解決此問題。

雖然我沒有使用過這一點，有GitHub上的實驗實現https://github.com/wemakeweb/element-queries

這是假設，讓你寫這樣的查詢：

@media only screen and (element: .widget) and (element-max-height: 30px)

來源

2013-06-20 02:50:45 robtarr

感謝您的回答，robtarr，這個解決方案似乎是部分工作的，它只在頁面加載時計算元素寬度，如果我調整瀏覽器的大小，我還需要刷新頁面才能生效。 – Ion

@ user2501106我剛剛添加了一個不存在這種問題的新解決方案。 – csuwldcat

這裏是（IMO）一個更好的解決方案，提供與媒體查詢的API表面1：1奇偶校驗，但範圍爲個別元素：http://www.backalleycoder.com/2014/04/18/element-queries-from-the-feet-up/（包含腳本和演示）。雖然它使用的語法/方法有些不同它完全是動態的，所以當您更改樣式或查詢規則時不需要調用方法，它涵蓋了您在媒體查詢中可以執行的任何操作。

一旦有微小的，100 LOC腳本，可以使用下面的風格元素：

HTML

<section media="query(small, (max-width: 300px) and (max-height: 300px))"> 

    <ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    </ul> 

</section>

CSS

section[matched-media~="small"] { 
    font-size: 50%; /* small text for a wee lil element! */ 
} 

/* Multiple matches example: */ 

section[matched-media~="small skinny"] { 
    ... 
}

把你query()聲明在任何的media=""屬性中元素，那麼當查詢匹配時，腳本將將其添加到元素的matched-media=""屬性中。您可以在頁面生命週期的任何時候將查詢添加到新元素（只需使用setAttribute('media', ...)），它永遠不需要調用任何JS，所有屬性解析和查詢匹配都是異步和自動的！在上面的文章中查看關於解決方案機制的更詳細的解釋 - 它包括一個演示，以及兩個版本的腳本的回購。

來源

2014-04-25 15:04:41 csuwldcat

如何動態調整子元素的佈局到父容器的寬度？

回答

相關問題