当中间的内容发生变化时，让三个 div 自动调整大小答案

【问题标题】：Getting three divs to auto resize when the content in the middle one changes当中间的内容发生变化时，让三个 div 自动调整大小
【发布时间】：2011-07-06 10:29:48
【问题描述】：

我想要做的是将三个 div 包裹在一个固定宽度的容器中，当中间 div 中的内容展开时，它会自动调整大小。随着中间变大，如果有意义的话，它旁边的两个会变小。

<div id="container">
  <div class="one"/>
  <div class="middle">...</div>
  <div class="two"/>
</div>

不确定我是否应该为此使用 div 或 span。

对 CSS 有什么建议吗？

【问题讨论】：

每个div 的内容是什么？他们中的任何一个只是为了显示图像或背景图像吗？我想我要问的是：你的用例是什么？
@thirtydot 中间 div 旁边的两个 div 将不包含任何内容，只是一个边框顶部，中间 div 将包含两个链接。 :)

标签： css html

【解决方案1】：

@thirtydot 旁边的两个 div 中间的 div 将不包含任何内容，只是一个边框顶部，中间的 div 将包含两个链接。 :)

在这种情况下，我将回答您可能能够使用的更简单的东西。

见：http://jsfiddle.net/uZ5dn/

<div class="container">
    <span class="middle">content con tent the tent of cons content content</span>
</div>

.container {
    border-top: 5px solid #f0f;
    text-align: center;
}
.middle {
    background: #fff;
    display: inline-block;
    position: relative;
    top: -5px; /* same as border-top-width */
}

这不是很棒，但可能已经足够了。

至少，我会更好地了解下一步的建议。

【讨论】：

这很好！比我做的好多了，谢谢伙计:)
没问题。我所指的缺乏令人敬畏的是，如果你不能用纯色覆盖边框的中间部分（例如，出于透明度原因），它就不起作用。

【解决方案2】：

如果我没看错你的问题，我怀疑你必须用 JavaScript 和 DIVS 来做这件事。

您可以使用 .height() 函数获取和设置 DIV 的实际大小（以像素为单位）。

所以，你可以这样做：

if ($('#div2').height() > 200) {
   $('#div1').height(100);
   $('#div3').height(100);
} else {
   $('#div1').height(200);
   $('#div3').height(200);
}

【讨论】：