Question

我要做的是将三个div包装在固定宽度的容器中，当中间div中的内容扩展时，该容器将自动调整大小。随着中间变大，旁边的两个变得更小，如果这是有道理的。

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

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

有关CSS的任何建议吗？

Answer 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 */
}

这不是很棒，但可能还不错。

至少，我会更好地了解接下来的建议。

Answer 2

如果我正确地阅读了您的问题，我怀疑您必须使用JavaScript和DIVS执行此操作。

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

所以，你可以这样做：

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

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

2 个答案: