Squarespace：使3個同級元素始終具有相同的高度並保持響應式設計

Question

我已經在自學前端Web開發了一段時間了，到目前為止已經完成了多個客戶項目，並取得了不錯的成績。 我目前正在網站www.thrivetech.com上工作，並且有問題。 在此網站的主頁上，每行上方都有3個帶有圖像的文本列，我無法提出一種使它們都保持相同高度的好方法。 在不同的屏幕寬度下，這3列會更改高度，有時不匹配。 Squarespace對象具有本機響應能力，並且當屏幕變得足夠小時，這3列彼此堆疊並看起來很好。 我添加了許多自定義CSS來更改背景顏色，文本顏色等，但無法弄清楚如何實現此目的。 即使我刪除了所有CSS並只有一個帶有黑色文本的純白色頁面，這些列仍然會這樣做並且不會保持相同的高度。 我什至聯系了Squarespace支持人員，他們還沒有提出解決方案。 見下圖：

我將包括一些CSS來源，但是最好導航到thrivetech.com上的站點並檢查CSS以查看發生了什么。 我已經考慮過做一些事情，例如使用JS和jQuery來獲取所有這3個對象的高度，確定哪個最大，然后將所有3個對象的高度設置為最大高度，但是似乎應該更輕松，更優雅純CSS解決方案？ 感謝您的光臨！

Answer 1

解決：

我通過使用媒體查詢將這3列的父元素設置為顯示來解決了該問題：flex; 當窗口至少為640px寬時。 我需要媒體查詢的原因是，當窗口變小時，它們需要顯示為塊，因此我們可以利用Squarespace的本機響應式設計，以便在移動屏幕和較小的屏幕上，這些列相互堆疊。 這是一些簡單的偽代碼：

@media only screen and (min-width: 640px) {
  #parentDiv { display: flex; } 
}