javascript - JavaScript 流体布局

Question

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

现在布局看起来像这样：

我希望它看起来像这样：

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

我在这里上传了代码：http: //jsfiddle.net/methuselah/V44Jw/3/

Answer 1

这一切都可以通过 CSS 实现，而根本不需要 JavaScript。您不应该使用 JavaScript 来创建流畅的布局。

你已经用你的 CSS 做了一些很好的工作。一种简单的方法是对元素使用绝对定位，并使用相对大小。在每个 div 内部，position: relative;您可以随意进行绝对定位。

一个好的做法是将大小计算留给浏览器。如果你看看这个例子：

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

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