CSS属性之浮动flow

最新推荐文章于 2021-08-04 10:04:01 发布

jsfantasy

最新推荐文章于 2021-08-04 10:04:01 发布

阅读量924

点赞数

分类专栏： HTML&&CSS 文章标签： flow css

本文链接：https://blog.csdn.net/november_chopin/article/details/75747731

版权

HTML&&CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动练习</title>
		<style type="text/css">
			/*
			 *问题：如何让三个方块横着排列
			 * 		方法1、可以把块元素变为行内块元素
			 * */
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*display: inline-block;*/
				/*
				 * 如果希望块元素水平排列，可以使元素脱离文档流
				 * 可以用flow属性使元素浮动，脱离文档流
				 * 可选值：
				 * 		none：默认值，不会脱离文档流
				 * 		left：脱离文档流，元素向左浮动
				 * 		right：脱离文档流，元素向右浮动
				 * 
				 * 元素脱离文档流后，下方元素会向上移动
				 * 		如果浮动元素上面是一个没有浮动的块元素，则元素不会超过块元素
				 * 		如果一行里不能容下所有的浮动元素，则元素会自动换行
				 * 		浮动元素不会超过其兄弟元素
				 */
				/*float: left;*/
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				/*display: inline-block;*/
				float: right;
			}
			.box3{
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
				/*display: inline-block;*/
				/*float: left;*/
			}
		</style>
	</head>
	<body>
		<!--问题：如何让三个方块横着排列-->
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>

jsfantasy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS属性之浮动flow

浮动练习 /* *问题：如何让三个方块横着排列 * 方法1、可以把块元素变为行内块元素 * */ .box1{ width: 100px; height: 100px; background-color: red; /*display: inline-block;*/ /* * 如果希望块元素水平排列，
复制链接

扫一扫

专栏目录