CSS 在div中又嵌套了一个div2 div3 如何让div2 div3在div1中并列

html-css016

CSS 在div中又嵌套了一个div2 div3 如何让div2 div3在div1中并列,第1张

第一种方法（需要css3）：

<style>

.div1 {width:400px height:300px border:1px solid #00f}

.div2 {display:inline-block width:150px height:200px border:1px solid #f00}

.div3 {display:inline-block width:150px height:200px border:1px solid #0a0}

</style>

<div class=div1>

<div class=div2></div><div class=div3></div>

</div>

第二种方法：

<style>

.div1 {width:400px height:300px border:1px solid #00f}

.div2 {float:left width:150px height:200px border:1px solid #f00}

.div3 {float:left width:150px height:200px border:1px solid #0a0}

</style>

<div class=div1>

<div class=div2></div><div class=div3></div>

</div>

第三种方法：

<style>

.div1 {position:relative width:400px height:300px border:1px solid #00f}

.div2 {position:absolute left:0 top:0 width:150px height:200px border:1px solid #f00}

.div3 {position:absolute left:152px top:0 width:150px height:200px border:1px solid #0a0}

</style>

<div class=div1>

<div class=div2></div><div class=div3></div>

</div>

不用定位也可以实现

<div id="div1">

    <div id="div2"></div>

</div>

CSS中定义div1的宽度，将div2的设置为居中，上边距为10即可

#div1{width:400pxheight:390pxpadding-top:10px}

#div2{width:380pxheight:380pxmargin:0 auto}

这样实现或者直接#div{padding:10px}也可以， 如果是用定位,固定两个div的宽度后定位即可

#div1{width:400pxheight:400pxposition:relative}

#div2{width:380pxheight:380pxposition:absoluteleft:10pxtop:10px}

可以的，问题是要看你放置的意义何在，对于块元素与内联元素是可以相互转换的，如将内联元素变成块级元素，可增加样式display:inline.同理将div变成内联元素可增加样式display:block