观张鑫旭老师FLOAT慕课以后关于浮动布局的一些收获

最新推荐文章于 2021-06-16 03:41:27 发布

FrankYu_

最新推荐文章于 2021-06-16 03:41:27 发布

阅读量378

点赞数

分类专栏：浮动

本文链接：https://blog.csdn.net/FrankYu_/article/details/79254421

版权

浮动专栏收录该内容

2 篇文章 0 订阅

订阅专栏

作为一名刚刚接触HTML+CSS的前端小白，对于布局的理解十分浅显，在第一周的学习过程中，

由刚开始的全局absulote绝对定位，逐渐发展到float“砌砖头”式定位。今天观看张鑫旭大神的CSS-float

慕课后觉收获颇丰。

主要内容：float与流体布局

首先摆上一个demo,想要达到左侧一张图片，右侧是文本的效果。

在传统的浮动“砌砖头”布局当中，我们会进行以下布局。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.picture{float: left;width: 56px;}
.container{
width: 500px;
background-color: #2c4b63;
color:#fff;
}
</style>
</head>
<body>
<div class="container">
<div class="picture"><img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" alt=""></div>
<p class="text">：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
</div>
</body>
</html>

先给头像和文本一个宽度为500px的容器效果如下：

在容器宽度较大时，显示正常。但如果将容器的宽度改为300px，便会产生错位，如下图：

这就是传统砌砖头式布局的局限性。

而下面就衍生出新的布局。即赋予文本一个margin-left的值，即可避免产生错误。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.picture{float: left;width: 56px;}
.container{
width: 300px;
background-color: #2c4b63;
color:#fff;
}
.text{margin-left: 76px;}
	</style>
</head>
<body>
	<div class="container">
		<div class="picture"><img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" alt=""></div>
	 	<p class="text">：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
	</div>
</body>
</html>

这样子，即使容器宽度变小，头像与文本之间也始终会保持着一段间距。如图：

接下来，如果我们想要实现头像在右边，文本在左边我们依照上述的方法，便会自然而然的产生以下想法：

令图片右浮动，给文本增加一个margin-right的值。然而这样实现有一个问题，在我们的看到的效果图中

文本在左边，图片在右边，也就是说文本的是在图片之前的。然而在HTML代码当中则不然，在HTML中图片

的位置是在文本的前面的。以下就是让文本与图片的位置在HTML代码与肉眼所见一致的方法。

也就是DOM与显示位置匹配的单侧布局。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
width: 300px;
background-color: #2c4b63;
color:#fff;
height: 300px;
}
.container2{width: 100%;float: left;background-color: #2c4b63;}
.text{margin-right: 76px;}
.picture{width:56px;float:left;margin-left: -56px;}


	</style>
</head>
<body>
	<div class="container">
	 	<div class="container2">
	 		<p class="text">：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
	 	</div>
	 	<div class="picture"><img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" alt=""></div>
	 </div>
	 	
	</div>
</body>
</html>

最后，如果头像的大小也想变化怎么办？

这时就是最后一种方法：浮动与两侧皆适应的流体布局。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.container{
			width: 600px;
			background-color: #2c4b63;
			color:#fff;
			height: 300px;
		}
		.container2{display: table-cell; *display: inline-block; width: 2000px; *width: auto;background-color: #2c4b63;}
		.picture{float:left;margin-right: 20px;}


	</style>
</head>
<body>
	<div class="container">
		<div class="picture"><img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" style="width:80px;"  alt=""></div>
	 	<div class="container2">
	 		<p class="text">：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
	 	</div>
	 </div>
	 	
	</div>
</body>
</html>

即也给文本外套一个标签，并且给他的样式添加display属性，其中table-cell适用于IE8+,而inline-block适用于低版本，再

将他的宽度设为一个较大的数值如代码中的2000，甚至是9999，即可达到两侧自适应的效果。

FrankYu_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
观张鑫旭老师FLOAT慕课以后关于浮动布局的一些收获

作为一名刚刚接触HTML+CSS的前端小白，对于布局的理解十分浅显，在第一周的学习过程中，由刚开始的全局absulote绝对定位，逐渐发展到float“砌砖头”式定位。今天观看张鑫旭大神的CSS-float慕课后觉收获颇丰。主要内容：float与流体布局首先摆上一个demo,想要达到左侧一张图片，右侧是文本的效果。在传统的浮动“砌砖头”布局当中，我们会进行以下布局。
复制链接

扫一扫