Question

我已经在这方面工作了很长一段时间，但我仍然无法让它发挥作用。我希望2个div显示在行中，而其中一个居中。我可以通过使其中一个绝对而另一个具有margin：0 auto;来获得这个，但在小屏幕上，居中的div将与绝对div重叠。

实施例： JsFiddle Example Here 那么有可能不在小分辨率上重叠2个div吗？

这是我的代码：

＆＃13;

#absolute{
    position:absolute;
    width:200px;
    height:100%;
    
    border:2px solid;
    text-align:center;
}
#center{
    width:500px;
    height:200px;
    margin:0 auto;
  
    border:2px solid;
    text-align:center;
}

＆＃13;

<div id="absolute">The absolute div</div>
<div id="center">The centered div</div>

＆＃13;

Answer 1

您应添加父包装，其中padding-right等于绝对元素的宽度。同时将left:0;添加到绝对元素

这是代码：https://jsfiddle.net/v0sww57L/2/

Answer 2

将您的CSS更改为此版本，它应该可以正常工作。将宽度更改为您在片段中显示的侧栏上的任何内容，但它们仍然不会重叠并且看起来不错。您不需要将其设为绝对值，只需将其浮动到左侧并为其设置宽度即可。

#absolute{
width:50%;
height:100%;
float: left;
border:2px solid;
text-align:center;}

#center { 
height:200px;
border:2px solid;
margin:0 auto;
text-align:center;
}

如何在1中居

2 个答案: