我想定位嵌套div，div1在上，div2在下，div3在div1 div2的右边，该怎样用CSS 实现呢？
4个回答
展开全部
我的方法和二楼的方法类似，也是左右两个DIV，都往左浮动，然后在左边的DIV里面设置DIV1和DIV2，通过DIV2 clear清除父对象的浮动 这样很自然的就上下对齐了~~个人建议，通过宽度来被动调节上下对齐的方式 不如主动的设置对齐方式，因为在未知的浏览器中，我们不知道它们怎么解释这种情况，所以还是手动设置比较稳妥！
以下代码，经过了IE8、Firefox、Safari、以及360的测试，显示正常，不会出错：
*****************************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
/*定义全局样式*/
body{
color:#0066FF;
margin:0px;
padding:0px;
}
/*定义局部容器contanier_left*/
#body_left{
float:left;}/*往左浮动*/
/*定义div1*/
#div1{
width:200px;
height:200px;
border:thin solid #FF0000}/*为了让你看到效果 加的边框*/
/*定义div2*/
#div2{
clear:both;/*关键就是这里：清除父对象也就是#body_lef定义的浮动，这样就可以竖直对齐了*/
width:200px;
height:200px;
border:thin solid #FF0000}
/*定义div3*/
#div3{
float:left;
width:200px;
height:400px;
border:thin solid #FF0000}
</style>
</head>
<body>
<div id="body_left">
<div id="div1">这是div1</div>
<div id="div2">这是div2<br/>div1和div2的对齐方式就是通过div2清除父对象的浮动形成的效果，这样是我们主动设置，不管在任何浏览器中都能保持这样的布局</div>
</div>
<div id="div3">这是div3</div>
</body>
</html>
**********************************************
希望我的详细解释能够帮助到楼主，如果楼主觉得我的回答可以帮你最大的解决问题，那请不要吝惜你的最佳，请将他给我！
以下代码，经过了IE8、Firefox、Safari、以及360的测试，显示正常，不会出错：
*****************************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
/*定义全局样式*/
body{
color:#0066FF;
margin:0px;
padding:0px;
}
/*定义局部容器contanier_left*/
#body_left{
float:left;}/*往左浮动*/
/*定义div1*/
#div1{
width:200px;
height:200px;
border:thin solid #FF0000}/*为了让你看到效果 加的边框*/
/*定义div2*/
#div2{
clear:both;/*关键就是这里：清除父对象也就是#body_lef定义的浮动，这样就可以竖直对齐了*/
width:200px;
height:200px;
border:thin solid #FF0000}
/*定义div3*/
#div3{
float:left;
width:200px;
height:400px;
border:thin solid #FF0000}
</style>
</head>
<body>
<div id="body_left">
<div id="div1">这是div1</div>
<div id="div2">这是div2<br/>div1和div2的对齐方式就是通过div2清除父对象的浮动形成的效果，这样是我们主动设置，不管在任何浏览器中都能保持这样的布局</div>
</div>
<div id="div3">这是div3</div>
</body>
</html>
**********************************************
希望我的详细解释能够帮助到楼主，如果楼主觉得我的回答可以帮你最大的解决问题，那请不要吝惜你的最佳，请将他给我！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div id="content">
<div id="left" style="float:left;">
<div id="div1" style="width:100px;height:100px;border:#0f0 1px solid;">div1</div>
<div id="div2" style="width:100px;height:100px;border:#00f 1px solid;">div2</div>
</div>
<div id="div3" style="float:left;width:100px;height:200px;border:#f00 1px solid;">div3</div>
<div style="clear:both;"></div><!--清除浮动-->
</div>
<div id="left" style="float:left;">
<div id="div1" style="width:100px;height:100px;border:#0f0 1px solid;">div1</div>
<div id="div2" style="width:100px;height:100px;border:#00f 1px solid;">div2</div>
</div>
<div id="div3" style="float:left;width:100px;height:200px;border:#f00 1px solid;">div3</div>
<div style="clear:both;"></div><!--清除浮动-->
</div>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
左右两边两个div漂浮。。。然后在左边的div里面再嵌两个div，给左边的div设置一个宽度，只要里面的两个div的宽度和大于外面的div 那么里面的两个div就分上下结构了
<style>
*{margin:0px;padding:0px;}
body{margin:0px auto;padding:0px;}
.Main{width:1001px;margin:0px auto}
.div_left{width:33%;float:left;border:1px solid red;height:500px;}
.div_right{width:66%;float:left;border:1px solid red;height:500px;margin-left:5px;display:inline;}
.div1{width:80%;height:200px;border:1px solid red;margin-left:10px;margin-top:10px;float:left;display:inlin;}
.div2{width:80%;height:250px;border:1px solid red;margin:10px 0px 0px 10px;float:left;display:inline;}
</style>
<div class="Main">
<div class="div_left">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
<div class="div_right">
</div>
</div>
这样你看那红线就可以分析的出来了
<style>
*{margin:0px;padding:0px;}
body{margin:0px auto;padding:0px;}
.Main{width:1001px;margin:0px auto}
.div_left{width:33%;float:left;border:1px solid red;height:500px;}
.div_right{width:66%;float:left;border:1px solid red;height:500px;margin-left:5px;display:inline;}
.div1{width:80%;height:200px;border:1px solid red;margin-left:10px;margin-top:10px;float:left;display:inlin;}
.div2{width:80%;height:250px;border:1px solid red;margin:10px 0px 0px 10px;float:left;display:inline;}
</style>
<div class="Main">
<div class="div_left">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
<div class="div_right">
</div>
</div>
这样你看那红线就可以分析的出来了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1楼的好！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
