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

求大神指点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的下面。

    点赞 评论
  • 魂断@蓝桥 2021-01-31 16:47

    浮动脱离文档流,会对后面的元素位置产生影响,第一种方法,one不占用原本的位置,所以two直接在第一排,div是块级元素,独占一行,所以three不管浮动还是不浮动,都会另起一行,第二种方法,是one和three都为浮动元素,他们都脱离了文档流,two在one和three之后,所以会在第一行居中,one和three一个左浮动一个又浮动,所以在两边,能出现在同一行

    点赞 1 评论
  • Armouy 2021-01-29 15:31

    当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的宽度;

    点赞 评论
  • 丶极致 2021-01-31 08:09

    感谢!

    点赞 评论

相关推荐 更多相似问题