如何設置div的底邊距等於其高度（高度會變化）？

Question

我遇到的問題可能與我嘗試的問題有不同且更簡單的解決方案，因此我將進行詳細說明，以便人們可以提供其他答案。

我在類似於Shopify的平台上構建了一個響應式主題，在該主題中，客戶將使用小部件區域並用自己的內容填充它們。 在頁腳中，我有3個div，左邊為25％寬度，中間為50％寬度，右邊為25％。 我暫時不使用“浮動”一詞，因為我希望中心div（50％）的寬度達到100％，並在分辨率<= 992px（Bootstraps col-sm斷點）時占據最高位置。

這段代碼演示了我正在嘗試做的事情。 純CSS可能無法實現，因此隨時提供您可以想到的任何解決方案。

的HTML

<div class="center-div">
   /* user content of varying height */
</div>
<div class="left-div">
   /* user content */
</div>
<div class="right-div">
   /* user content */
</div>

和CSS

.center-div {
  width: 50%;
  margin: 0 auto;
  margin-bottom: /* negative and equal to the height of the user's content */
}

.left-div {
  width: 25%;
  float: left;
}

.right-div {
  width: 25%;
  float: right;
}

@media (max-width: 992px) {
.center-div { width: 100%; margin: 0px; }
.left-div { width: 50%; }
.right-div { width: 50%; }
}

*編輯*

沒關系的人。 我使這完全困難。 發布此內容大約一分鍾后，我意識到我可以將它們全部包裝在一個相對的div中，並給左和右divs絕對定位，直到斷點為止。
好奇的小提琴然而，如果您願意，請隨時回答問題，因為我想知道是否有可能。

Answer 1

首先將Divs Float左右浮動，然后再放置內容。

如果左右浮動div之間有空格，則Content將填充它。 （L：25 / C：50 / R：25）否則，內容將中斷。 （L：50 / R：50 // C：100）

<div class="left-div">
    /* user content */
</div>
<div class="right-div">
    /* user content */
</div>
<div class="center-div">
    /* user content of varying height */<br>
    /* user content of varying height */<br>
    /* user content of varying height */<br>
    /* user content of varying height */<br>
    /* user content of varying height */<br>
</div>

CSS：

.left-div {
    background-color: #a99;
    float: left;
    width: 25%;
}

.right-div {
    background-color: #9a9;
    float: right;
    width: 25%;
}

.center-div {
    background-color: #99a;
}

@media (max-width: 992px) {
    .center-div { width: 100%; }
    .left-div, .right-div { width: 50%; }
}

在所有情況下，所有div具有相同的高度：

$('.left-div, .right-div').height(function(){
    return $('.center-div').height();
});

小提琴