丶极致 2021-01-29 09:45 采纳率: 100%
浏览 52
已采纳

求大神指点div布局顺序问题

这是一个div布局，中部自适应的代码

下面是第一次的div布局顺序代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.one{
		width:75px;
		height:100px;
		background-color:#F60;
		float:left;
		margin-top:0px;
		margin-left:0px;
	}
	.two{
		height:100px;
		background-color:#F00;
		margin-left:75px;
		margin-right:75px;
	}
	.three{
	width: 75px;
	height: 100px;
	background-color: #FC0;
	float: right;
	margin-top:0px;	
	margin-right:0px;
	}
		
</style>
</head>

<body>
<div class="one">this is one</div>
<div class="two">this is three</div>
<div class="three">this is three</div>
</body>
</html>

效果图

这是运行结果

下面是调整后的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
	.one{
		width:75px;
		height:100px;
		background-color:#F60;
		float:left;
		margin-top:0px;
		margin-left:0px;
	}
	.two{
		height:100px;
		background-color:#F00;
		margin-left:75px;
		margin-right:75px;
	}
	.three{
	width: 75px;
	height: 100px;
	background-color: #FC0;
	float: right;
	margin-top:0px;	
	margin-right:0px;
	}
		
</style>
</head>

<body>
<div class="one">this is one</div>
<div class="three">this is three</div>
<div class="two">this is three</div>
</body>
</html>

运行如下

效果图2

求大神讲解一下！！！

  • 写回答

4条回答 默认 最新

  • Armouy 2021-01-29 15:35
    关注

    当div的顺序是第一种时：

    <div class="one">this is one</div>
<div class="two">this is three</div>
<div class="three">this is three</div>

    one是浮动的情况，`float`是不完全脱离文档流，此时还是会占据one的宽度；

    two是正常的情况，此时他有margin，margin是从one占据的位置开始的，即你可以想象此时one在two的margin-left上面，所以由于margin-left + width + margin-right 占据了一整行，所以three只能从第二行开始了。

     

    当div的顺序是第二种时：

    <div class="one">this is one</div>
<div class="three">this is three</div>
<div class="two">this is three</div>

    one和three都是float 半脱离文档流；two的margin-left在one的下面，margin-right在three的下面。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 加热介质是液体，换热器壳侧导热系数和总的导热系数怎么算
  • ¥15 想问一下树莓派接上显示屏后出现如图所示画面，是什么问题导致的
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败