css盒子问题-慕课网

首页课程实战体系课手记专栏慕课教程

css盒子问题

来源：12-13 距离产生美 - 使用margin为盒子设置外边距（边界）

嘉欣

2016-11-26 21:41

css中的盒子是一个大盒子里面套两个小盒子，且这两个小盒子是左右结构关系，我应该怎么编写代码呢？请大神帮忙解决

http://img.mukewang.com/583990b10001bacb13480657.jpg

写回答关注

6回答

天生我才必有用哈

2016-11-26 22:33:30

已采纳

<!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行代码

1 0

嘉欣

非常感谢！

2016-12-13 10:13:00

共 1 条回复 >
qq_Absurdyears_0

2017-02-13 21:34:21

<!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 0
慕设计5303657

2016-11-26 22:26:51

box2用float:left box3用float:right

0 0
慕雪0008635

2016-11-26 22:24:06

你可以定义三个div，一个父亲，两个儿子，给id="left"另一个给id="right",然后可以用绝对定位，父div记得相对定位一下

0 0
北雅崎

2016-11-26 22:23:02

在head里面写一个css语句，在css语句下面在写两个分别是左右两个语句，然后在html里写div语句，在div语句里面嵌套两个div语句就可以了。

0 0
qq_配角儿_04417424

2016-11-26 22:21:19

两个小盒子宽度加起来=大盒子的尺寸，全部左浮动

0 0