浮动模型实现不了在同一行的一左一右-慕课网

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

浮动模型实现不了在同一行的一左一右

来源：13-4 起飞咯 - 浮动模型

小丑20

2016-09-11 12:48

<!DOCTYPE HTML>

<html>

<head>

div{

border:2px red solid;

width:200px;

height:400px;

}

#div1{

float:letf;

}

#div2{

float:right;

}

</style>

</head>

<body>

</body>

</html>

写回答关注

6回答

慕圣6089952

2016-09-11 13:07:20

已采纳

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
div{
border:2px red solid;
width:200px;
height:400px;
}
#div1{
float:letf;
display:inline-block;
}
#div2{
float:right;
}

</style>
</head>
<body>

<div id="div1">栏目1</div>

<div id="div2">栏目2</div>
</body>
</html>

0 0
慕粉1474438898

2016-10-21 17:27:21

因为你把写错了不是letf 应该是left

0 0
慕粉2035072466

2016-10-12 19:13:10

其实是你代码打错，
#div1{
float:letf;
}
改为

#div1{
float:left;
}

0 0
jidashen

2016-09-11 13:14:04

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
div{
border:2px red solid;
width:200px;
height:400px;
}
#div1{

float:left;
}
#div2{
float:right;
}

</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>
</html>

0 2
慕粉3941115

2016-09-11 13:03:32

把div1 div2宽度都改小就行，他俩的宽度超过了你设置的div宽度，一行就盛不下了。

1 1

小丑20

div的width不是设置div1和div2的width吗？

2016-09-11 13:12:57

共 1 条回复 >
weibo_城市废墟里的蟑螂_0

2016-09-11 12:59:18

因为在div中的width的宽度过大，而模拟状态下width总值不够400px，所以就不能并排，你把它改成100px，就可以看到了

1 1

小丑20

我改成了50px还是不行，但是如果在div{}中添加一条float:left;就可以了

2016-09-11 13:06:37

共 1 条回复 >