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

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

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

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

}

#div2{

float:right;

}

</style>

</head>

<body>

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

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

</body>

</html>

提问者：小丑20 2016-09-11 12:48

个回答

慕圣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
慕粉1474438898

2016-10-21 17:27:21

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

0
慕粉2035072466

2016-10-12 19:13:10

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

#div1{
float:left;
}

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>

2
慕粉3941115

2016-09-11 13:03:32

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

1
weibo_城市废墟里的蟑螂_0

2016-09-11 12:59:18

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

1