不知为何我代码浮动不起作用

问题描述

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>3.两列布局右边固定左边自适应</title>

<style type="text/css">

.main {

height:600px;

background-color:skyblue;

margin-right:200px;

}

.right {

width:200px;

height:600px;

background-color:lightgreen;

float:right; /*设置块元素的右浮动*/

}

</style>

</head>

<body>

<div>主体</div>

<div>右侧</div>

</body>

</html>

问题解答

同意二楼观点

你使用margin-right:200px;

是想给右边div留位置出来吧？

但是div默认宽度100%

所以你设置margin-right:200px;之后的div宽度其实还是100%

因为padding，margin，width，border 加起来才是组件的真实宽度或高度

请将

<div>主体</div>

<div>右侧</div>

改为

<div class="main">主体</div>

<div class="right">右侧</div>

再测试代码~

我去怎么吞代码了，class没了