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

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

我想用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 12:13

个回答

六月时光

2015-08-04 14:24:17

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

0

慕斯卡9626126: 2015-08-04 13:19:01

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

看到后面才发现