温柔小王子 6楼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>编程题</title>
<style type="text/css">
/*第一个盒子*/
.box1 {
border: 1px green solid;
position: relative;
margin: 5px;
}
.logo {
border: 1px red solid;
display: inline-block;
width: 50px;
height: 55px;
margin: 5px;
}
.name {
border: 1px black solid;
float: right;
width: 150px;
position: absolute;
bottom: 5px;
right: 5px;
text-align: right;
}
/*第二个盒子*/
#box2 {
margin: 10px 5px;
height: 400px;
position: relative;
}
.left{
border: 1px blue solid;
margin-right:210px ;
height: 400px;
}
.right{
width: 200px;
position: absolute;
top: 0;
right: 0;
border: 1px red solid;
}
/*第三个盒子*/
#box3 {
border: 1px darkgoldenrod solid;
text-align: center;
margin: 5px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="box1">
<div class="logo">Logo</div>
<div class="name">用户名</div>
</div>
<div id="box2">
<div class="left">
content-自适应宽度
</div>
<div class="right">
aside-定宽200px
</div>
</div>
<div id="box3">
footer
</div>
</body>
</html>
京公网安备 11010802034997号