<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
<title></title>
??<style?type="text/css">
????????#box1{
????????????width:?400px;
????????????height:?500px;
????????????margin-bottom:?30px;
????????????border:?2px?solid?blue;
????????????text-align:?left;??????
????????}
????????#box2{
????????????width:?150px;
????????????height:?450px;
????????????border:?3px?solid?yellow;
????????????margin-left:?30px;
????????????padding:?2px;
????????????float:?left;
????????}
????????#box3{
????????????width:?150px;
????????????height:?450px;
????????????margin-left:?20px;
????????????border:?3px?solid?pink;
????????????margin-right:?20px;
????????????margin-top:?-15px;
???????????float:?left;
????????}
????</style>
</head>
<body>
????<div?id="box1">
????????box1
????????<div?id="box2">box2</div>
????????<div?id="box3">box3</div>
????</div>
</html>
2017-05-18
#box1{display:flex;}
2017-05-15
!DOCT<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <title></title>
? <style type="text/css">
? ? ? ?
? ? ? ?div{
? ? ? ? width: 700px;
? ? ? ? height:1400px;
? ? ? ? }
? ? ? ? #box1{
? ? ? ?
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 500px;
? ? ? ? ? ? margin-bottom: 30px;
? ? ? ? ? ? border: 2px solid blue;?
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? ? ? #box1 span{
? ? ? ? float: left;
? ? ? ? }
? ? ? ? #box2{
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? height: 450px;
? ? ? ? ? ? border: 3px solid yellow;
? ? ? ? ? ? margin-left: 30px;
? ? ? ? ? ? padding: 2px;
? ? ? ? ? ? float: left;
? ? ? ? }
? ? ? ? #box3{
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? height: 450px;
? ? ? ? ? ? margin-left: 230px;
? ? ? ? ? ? border: 3px solid pink;
? ? ? ? ? ? margin-right: 20px;
? ? ? ? ? ? margin-top: 0px;
? ? ? ? ? ? float: left;
? ? ? ? ? ? position: absolute;
? ? ? ? }
? ? </style>
</head>
2017-05-15
在box1里加入left:0;
2017-05-15
加入代碼；position:absolute;left:0;