Question

在页面的某个地方，如何在div-a1上方创建div-a2位置？当然，我不能在下面的布局中将div-a2放在div-a1之上。

<div id=a>

<div id=a1> something here
</div>
<div id=a2> show this part first
</div>

</div>

仍在寻找更好的解决方案。感谢

Answer 1

你可以用纯css实现这个目标。写得像这样：

#a{
    display:-moz-box;
    display:box;
    display:-webkit-box;
    -moz-box-direction:reverse;
    box-direction: reverse;
    -moz-box-direction:reverse;
    -webkit-box-direction:reverse;  
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    box-orient:vertical;     
}

” 请检查此http://jsfiddle.net/ASVtx/1/

Answer 2

你需要给出元素绝对位置css，然后根据每个元素的内容大小适当地定位它们：

#a1,#a2{position:absolute;}
#a2{  top: 0; }
#a1{  top: 200px;}

OR，在父母内部：

#a1,#a2{position:relative;}
#a2{  top: 0; }
#a1{  top: 200px;}

或者，一个或许更好的替代方案是更改布局顺序（但我认为由于某些原因，未说明这是不可能的。）

以下是一个示例：http://jsfiddle.net/MarkSchultheiss/CRCvU/

请参阅此更新示例，其中我使用em代替px作为位置，为父级提供边框，以便您查看其范围，并在父级周围添加内容。 http://jsfiddle.net/MarkSchultheiss/CRCvU/1/

万一你想要这样做，这里是jQuery代码：

var ah1 = $('#a1').height();
var ah2 = $('#a2').height();
var ah = $('#a').height();
var relpos = {float:"left",
    display: "inline-block",
    position: "relative",
    clear: "both"
};
$('#a').css({
    height: ah
});
$('#a1, #a2').css(relpos);
$('#a2').css('top', -ah1);
$('#a1').css('top', ah2);

在此处使用脚本示例：http://jsfiddle.net/MarkSchultheiss/CRCvU/3/

如何在父div的顶部放置div

2 个答案: