0
  • 尝试使用 css 和 jquery 对齐绝对和静态元素
  • 使用 css 渲染静态元素
  • 使用 css 渲染绝对元素
  • 使用 jquery 重置绝对元素的“顶部”值。我使用与为 css 中的静态元素配置的相同的边距/填充等
  • 但是我的绝对元素和静态元素没有水平对齐。
  • 此外，在浏览器调整大小时，布局更加扭曲

小提琴：http : //jsfiddle.net/bG537/30/

请尝试调整浏览器大小，然后重新加载浏览器以查看差异

如何使用 css 和 jquery 对齐两个 abs/static 元素？？？

HTML

<div class="space">
</div>
<div class="rel_class">
    STATIC
</div>
<div class="abs_class">
    ABS
</div>

CSS

.space {
    margin-top:80px;
    border: 1px solid red;
}
.rel_class {
    width: 300px;
    height: 300px;
    margin-left:120px;
    margin-top:9%;
    border:1px solid blue;
}

.abs_class {
    position: absolute;
    width:100px;
    height:100px;
    border: 1px solid green;
}

jQuery

$(function() {
    var abs_ele = $(".abs_class");
    var tp = 80 + 0.09*($(window).height());
    abs_ele.css({top:tp+'px'});
});
4

1 回答 1

0 
I have updated your code. Please check below link.

http://jsfiddle.net/bG537/36/

于 2013-04-29T04:31:27.387 回答