如何使用CSS控制3个div，实现如下图的布局？ 5
5个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
body,html,div{
margin:0;
padding: 0;
width: 100%;
height: 100%;
}
.lt,.lb{
width: 200px;
background-color: green;
}
.lt{
margin-bottom: 5px;
height: 600px;
}
.lb{
height:calc(100% - 605px);
}
.rt{
position: absolute;
top: 0;
left:205px;
height: 100%;
background-color: green;
width: calc(100% - 205px)
}
</style>
</head>
<body>
<div class="lt" id="lt"></div>
<div class="lb"></div>
<div class="rt"></div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
中间那个左浮动
~ float：left； 即可
~ float：left； 即可
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
初步想法是用，绝对定位做
其他方法暂时没想到，这关系到列和行的混合，要是4个div方法就很多了
其他方法暂时没想到，这关系到列和行的混合，要是4个div方法就很多了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
CSS部分————————————
<style type="text/css">
.wrap{width:500px;height:auto;}
.f_l{float:left;width:200px;}
.abox{width:100%;height:300px;}
.bbox{width:100%;height:200px;margin-top:15px;}
.f_r{float:right;width:260px;}
</style>
HTML部分。————————————
<div class="wrap">
<div class="f_l">
<div class="abox"></div>
<divclass="bbox"></div>
</div>
<div class="f_r"></div>
</div>
CSS里面的宽高自己设置，原理就这样，方法多样的。
<style type="text/css">
.wrap{width:500px;height:auto;}
.f_l{float:left;width:200px;}
.abox{width:100%;height:300px;}
.bbox{width:100%;height:200px;margin-top:15px;}
.f_r{float:right;width:260px;}
</style>
HTML部分。————————————
<div class="wrap">
<div class="f_l">
<div class="abox"></div>
<divclass="bbox"></div>
</div>
<div class="f_r"></div>
</div>
CSS里面的宽高自己设置，原理就这样，方法多样的。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
感觉应该要用到float
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
