一个大div里面有四个小div，两个div层顶部对齐，两个div层底部对齐，怎么能实现
2个回答
展开全部
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.big{ display:block; min-height:500px; position:relative; width:500px;}
.left1{ display:block; height:50px; width:100px; background-color:#F00; position:absolute; top:0px; left:0px;}
.left2{ display:block; height:150px; width:100px; background-color:#0F0; position:absolute; bottom:0px; left:0px;}
.right1{ display:block; min-height:100px; width:300px; background-color:#00F; position:absolute; left:110px; top:0px;}
.right2{ display:block;width:300px; height:100px; background-color:#FF0; position:absolute; left:110px; bottom:0px;}
</style>
</head>
<body>
<div class="big">
<div class="left1"></div>
<div class="left2"></div>
<div class="right1"></div>
<div class="right2"></div>
</div>
</body>
</html>
更多追问追答
追问
这个在大的div高度固定的情况下确实可以，如果高度不固定好像不行
追答
你试试这个，用浮动的
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.big{ display:block; width:450px;}
.left1,.left2,.right1,.right2{ float:left;}
.left1{ display:block; height:50px; width:100px; background-color:#F00;}
.left2{ display:block; height:150px; width:100px; background-color:#0F0; }
.right1{ display:block; min-height:100px; width:300px; background-color:#00F;}
.right2{ display:block;width:300px; height:100px; background-color:#FF0;}
</style>
</head>
<body>
<div class="big">
<div class="left1"></div>
<div class="right1">
dddddd<br>
d<br>
d<br>
d<br>
d<br>
d<br>
d<br>
d<br>
d<br>
d<br>
d<br>
</div>
<div class="left2"></div>
<div class="right2"></div>
</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="left">
<div class="up"></div>
<div class="down"></div>
</div><style>
.left{ position:relative; width:100px; height:500px;border:solid 1px #000;}
.up{ position:absolute; width:100px; height:200px; border:solid 1px #000;}
.down{ position:absolute; bottom:0; width:100px; height:100px; border:solid 1px #000;}
</style>
里面分成左右两个div，右侧的跟这差不多
追问
右侧2的高度是不固定的，自动增长的，如果太长了就会覆盖住4
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
