css盒子问题
css中的盒子是一个大盒子里面套两个小盒子，且这两个小盒子是左右结构关系，我应该怎么编写代码呢？请大神帮忙解决
嘉欣
2016-11-26
7 回答
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#box1{
width: 400px;
height: 500px;
margin-bottom: 30px;
border: 2px solid blue;
position: relative; //代码1
}
#box2{
width: 200px;
height: 450px;
border: 3px solid yellow;
margin-left: 10px;
padding: 2px;
}
#box3{
width: 150px;
height: 450px;
margin-left: 220px;
border: 3px solid pink;
margin-right: 20px;
position: absolute; //代码2
top: 0; //代码3
}
</style>
</head>
<body>
<div id="box1">
box1
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
</body>
</html>
加3行代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>边距</title>
<style type="text/css">
body{width:650px;
height:320px;
padding:15px;
border:1px solid red;}
div{
width:300px;
height:300px;
margin:10px;
border:1px solid red;
float:left;
}
#box1{margin-bottom:30px;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>
举报
0/150
提交
取消
