日期:2014-05-17  浏览次数:20700 次

CSS怎么定位 div 高手来帮下忙
<style>
body {margin:0;font-size:12px;text-align:center;}
#aa {width:800px;height:800px;border:1px solid red;}
#aa1 {width:200px;height:225px;border:1px solid red;}
#aa2 {width:400px;height:225px;border:1px solid red;}
#aa3 {width:200px;height:225px;border:1px solid red;}
</style>

<div id="aa">
<div id="aa1">aa1</div>
<div id="aa2">aa2</div>
<div id="aa3">aa3</div>
</div>


我的问题是,aa是一个大的框架,让aa1位于aa的左边,aa2位于aa的中间,aa3位于aa的右边.

我现在做出来的是一竖排的??我要的是一横排!

------解决方案--------------------
<style> 
body {margin:0;font-size:12px;text-align:center;} 
#aa {width:800px;height:800px;border:1px solid red;} 
#aa1 {width:200px;height:225px;border:1px solid red;float:left;} 
#aa2 {width:200px;height:225px;border:1px solid red;float:left;padding-left:300px;} 
#aa3 {width:200px;height:225px;border:1px solid red;float:right;} 
</style> 

<div id="aa"> 
<div id="aa1">aa1 </div> 
<div id="aa2">aa2 </div> 
<div id="aa3">aa3 </div> 
</div>
------解决方案--------------------
<style> 
body {margin:0;font-size:12px;text-align:center;} 
#aa {width:800px;height:800px;border:1px solid red;position:relative;} 
#aa1 {width:200px;height:225px;border:1px solid red;position:absolute;left:0px;top:0px;} 
#aa2 {width:400px;height:225px;border:1px solid red;position:absolute;left:200px;top:0px;}
#aa3 {width:200px;height:225px;border:1px solid red;position:absolute;left:600px;top:0px;}
</style> 

<div id="aa"> 
<div id="aa1">aa1 </div> 
<div id="aa2">aa2 </div> 
<div id="aa3">aa3 </div> 
</div> 

------解决方案--------------------
CSS code

<style> 
body {margin:0;font-size:12px;text-align:center;} 
#aa,#aa1,#aa2,#aa3{border:1px solid red;width:200px;height:225px;}
#aa {width:808px;height:800px;} 
#aa1 {float:left;} 
#aa2 {width:400px;float:left;}  
#aa3 {float:left;}  
</style> 

<div id="aa"> 
<div id="aa1">aa1 </div> 
<div id="aa2">aa2 </div> 
<div id="aa3">aa3 </div> 
</div>

------解决方案--------------------
<style>
body {margin:0;font-size:12px;text-align:center;}
div#aa {width:800px;height:800px;border:1px solid red;position:relative;}
div#aa1,div#aa3 {width:200px;height:225px;border:1px solid red;position:absolute}
div#aa1 {left:0px;}
div#aa3 {left:600px;}
div#aa2 {width:400px;height:225px;border:1px solid red;position:absolute;left:200px;}
</style>
<div id="aa">
<div id="aa1">aa1 </div>
<div id="aa2">aa2 </div>
<div id="aa3">aa3 </div>
</div>