Question

我想在页面中间的第二个上面放两个div。一个将包含文本，第二个将包含图像。 div的大小不同。第一个更宽，第二个更高。我需要使用z-index，但是我应该如何将两个div放在中心位置（在第三个div 100％高度和100％页面宽度内？我可以使用:after但是当它们是相同的形状时但不是当他们的形状不一样时。）

Answer 1

默认情况下，<div>元素设置为display: block，这意味着每个元素都会显示在单独的行中。如果您希望它们一个出现在另一个之上，只需将它们连续放入代码中即可。接下来，您只需添加此CSS：

myDiv {
  position: relative // static (default) also works here
  margin:   auto;
}

Answer 2

最后我这样做了：

$(document).ready(function(){
$('#textDiv').css('top',parseInt($('#externalContainer').css('height'))/2 - parseInt($('#textDiv').css('height'))/2 + 'px');
$('#picDiv').css('top',parseInt($('#externalContainer').css('height'))/2 - parseInt($('#picDiv').css('height'))/2 - parseInt($('#textDiv').css('height')) + 'px');
$('#textDiv').css('left',parseInt($('#externalContainer').css('width'))/2 - parseInt($('#textDiv').css('width'))/2 + 'px');
$('#picDiv').css('left',parseInt($('#externalContainer').css('width'))/2 - parseInt($('#picDiv').css('width'))/2 + 'px');
});

页面中间两个一个在另一个下面

2 个答案: