怎么让文字box1居左-慕课网

怎么让文字box1居左

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

慕慕4512663

2017-05-15 16:42

<!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>

写回答关注

4回答

慕前端8788530

2017-05-18 20:49:47

已采纳

#box1{display:flex;}

2 0

慕前端878... 回复慕慕4512...

弹性布局，横纵交叉轴为核心，具体你看阮一峰的日志。http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

2017-05-22 15:44:21

共 2 条回复 >
weibo_小稚童丶_0

2017-05-15 17:09:40

!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>

0 0
qq_放牛的龙咚锵_03220873

2017-05-15 16:54:16

在box1里加入left:0;

0 0
阿曼da

2017-05-15 16:51:05

加入代码；position:absolute;left:0;

0 0