第一种方法（需要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}
利用CSS3 新添加的盒子模型属性 box-flex；可以让子容器针对父容器的宽度按一定规则进行划分。ie 目前不支持，估计后续版本会兼容这个属性。
必须在父元素上面加上display:box才可以对子元素进行规则划分。
box-flex:1这里的 1 指的是比例 。
如：
<!DOCTYPE html><head>
<title></title>
<style>
.box {
width: 200px /*宽度没有限制*/
height: 200px
display: -webkit-box /*这个必须要有*/
-webkit-box-orient:vertical /* 默认横向划分 vertical 为纵向划分*/
}
.box div{
height:100%
}
.div1{
background-color:red
-webkit-box-flex:1
}
.div2{
background-color:blue
-webkit-box-flex:1
}
.div3{
background-color:green
-webkit-box-flex:1
}
.div4{
background-color:darkblue
-webkit-box-flex:1
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
