Question

父元素使用了position: absolute;怎么让子元素并排显示？

<style type="text/css">
#a{
position: absolute;
border: 1px solid black;
}
#b{
border: 1px solid red;
width: 94px;
height: 94px;
margin: 2px;
}
#c{
border: 1px solid red;
width: 94px;
height: 94px;
margin: 2px;
}
</style>
<div id="a">
<div id="b">
</div>
<div id="c">
</div>
</div>

比如这个 怎么让B和C并排包含在A里
<style type="text/css">
#aa {
position: relative;
border: 1px solid black;
width: 80px
}
#a {
position: absolute;
border: 1px solid black;
left: 100%;
}

#b {
border: 1px solid red;
width: 94px;
height: 94px;
margin: 2px;
}

#c {
border: 1px solid red;
width: 94px;
height: 94px;
margin: 2px;
}
li{
min-width: 30px;
list-style: none;
}
</style>
<div id="aa">
<ul>
<li>1</li>
<li>
<div id="a">
<div id="b">

</div>
<div id="c">

</div>
</div>
</li>
<li>2</li>
</ul>
</div>
这是 a的position: absolute;状态

这是a的position: relative;状态

我不能让1和2被撑开。





Answer 1

1、父元素要有相对定位属性（position：relative），2、子元素在设置绝对定位（position：absolute），并且同时加四个方向（top，bottom，left，right）的任意方向的属性值。

追问

我补充了一下、大师看看何解

Answer 2

没有宽度，当pos0为相对定位时，pos0默认宽度继承了DIV的属性，占一行，当pos0为绝对定位时，就没有了宽度，要么给pos0设置宽度，要么给pos1设置宽度强制撑开外层pos0