HTML+CSS的问题，如何将div A居中显示，div B靠在div A右侧，如图。

Question

HTML+CSS的问题，如何将div A居中显示，div B靠在div A右侧，如图。如何将div A居中而div B靠在div A右侧，试过float但是一加上之前做的样式全都没了。寻一解决方法。

Answer 1

第一种方法，用绝对定位直接指定两个div的位置：

<style>
#A {position:absolute; left:50%; top:50%; width:400px; height:300px; margin-left:-200px; margin-top:-150px; background-color:#faa}
#B {position:absolute; left:50%; top:50%; width:100px; height:300px; margin-left:200px; margin-top:-150px; background-color:#aaf}
</style>
<div id=A></div>
<div id=B></div>

第二种方法，让B相对于A来定位（注意A包含B）：

<style>
#A {position:absolute; left:50%; top:50%; width:400px; height:300px; margin-left:-200px; margin-top:-150px; background-color:#faa}
#B {position:absolute; right:-100px; top:0; width:100px; height:300px; background-color:#aaf}
</style>
<div id=A><div id=B></div></div>

这两种的效果是完全一样的，而且几乎兼容所有浏览器

追问

OK，明天试试看，如果遇到什么问题还得请教 。

dalao能加一下注释吗，初学者有些看不懂，很费力。

我是用一个大的div包含这两个div，在大div设置了背景颜色为白色，但是用了这个方法后和用float属性一样，背景的白色消失了，或者说是这两个div不在大div里了，怎么办。