                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

我想用float来实现盒子的并排

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>边距</title>
<style type="text/css">
div{
    width:300px;
    height:300px;
	border:1px solid red;	
}
#box2{
    float:right;
}
</style>
</head>
<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>   
</body>
</html>

慕斯卡9626126

2015-08-04

源自：初识HTML(5)+CSS(3)-升级版 12-13

关注问题我要回答

831

操作

收起

2 回答

六月时光
2015-08-04

可以.box1 左浮动，.box2也左浮动；也可以.box1左浮动，box2有浮动；又或者box1右浮动，box2左浮动；还可以box1右浮动，box2也是右浮动，实现的效果都是不同的，可以都试试。但实现并排的话，一定要两个浮动。用定位和转换块状元素也可以实现这个效果

0 回复有任何疑惑可以回复我~

收起回答

慕斯卡9626126 提问者
2015-08-04

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>边距</title>
<style type="text/css">
div{
    width:300px;
    height:300px;
    border:1px solid red;
    float:left;
}
</style>
</head>
<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>   
</body>
</html>

看到后面才发现