JavaScript 流体布局

Question

我在我的布局中使用了带有 jQ​​uery 的流体布局，但遇到了一些我想问的问题。

现在布局看起来像这样:

我希望它看起来像这样:

同时保持它的流动性。我怎样才能实现这一目标？

我已将代码上传到此处:http://jsfiddle.net/methuselah/V44Jw/3/

Answer 1

使用 CSS 一切皆有可能，根本不需要 JavaScript。您不应使用 JavaScript 来创建流畅的布局。

您的 CSS 做得很好。一种简单的方法是对元素使用绝对定位，并使用相对大小。在每个带有 position: relative; 的 div 中，您可以随意进行绝对定位。

一个好的做法是将尺寸计算留给浏览器。如果你看一下这个例子:

#someDiv {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 80%;
}

由于顶部和底部的偏移量 0，此 div 将具有其父元素的 100% 高度。尝试改进你的 fiddle ，它可能会解决你所有的问题。再问你是否挣扎。