Question

我遇到的问题可能与我正在尝试的问题有一个不同且简单的解决方案，因此我将全面解释，以便人们可以提供其他答案。

我正在类似于Shopify的平台上构建响应主题，其中客户将获取小部件区域并用自己的内容填充它们。在页脚中，我有3个div，左边是25％宽度，中间是50％宽度，另一个是右边25％。我现在不使用术语浮点数，因为我希望中心div（50％）达到100％宽度并在分辨率＆lt; = 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绝对定位直到断点。
Fiddle for the curious 但是，如果你愿意，可以随意回答这个问题，因为我想知道这是否可行。

Answer 1

将第一个Divs Flos左右浮动，然后放入内容。

如果左右浮动div之间有空格，则内容将填充它。（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();
});

<强> FIDDLE

如何设置div的下边距等于它的高度（高度会有所不同）？

1 个答案: