div 页面布局 -- css 浮动应用

最新推荐文章于 2022-04-14 16:32:07 发布

成_蹉_跎

最新推荐文章于 2022-04-14 16:32:07 发布

阅读量360

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/cheng_cuo_tuo/article/details/106686240

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

页面布局应用，将三个div如下图排布。
在这里插入图片描述
这个会在显示个人信息的时候展示，红色的部分是头像；黄色的部分是固定的信息；蓝色的部分是可变的信息，且信息的长度不固定。
总体上看，红色为左侧部分，黄色和蓝色为右侧部分。
详细的页面代码如下，显示的是三个入上结构且添加 hover 样式：

<head>
  <style type="text/css">
	.single{
		/* 将父级别的浮动全部取消，这样可以保证每个 single 是上下排布 */
		clear: both; 
		padding-top: 10px;
		cursor: pointer;
		/* 这样可以保证子 div 是包裹在父 div 里面的，也就是 hover 的时候可以选中子 div  */
		overflow:hidden;
	} 
	.single:hover {
		background: #F1F1F1;
	}
	
	.left {
		width: 100px;
		height: 100px;
		background: red;
		float: left;
	}
	.right {
		float: left;
	}
	.top {
		height: 50px;
		width: 50px;
		background: yellow;
	}
	.down{
		height: 80px;
		width: 50px;
		background: blue;
	}
  </style>
 </head>
 <body>
  <div class="single">
	<div class="left"></div>
	<div class="right">
		<div class="top"></div>
		<div class="down">
			<div style="height: 30px; width: 50px; background: green;"> </div>
		</div>
	</div>
  </div>

  <div class="single">
	<div class="left"></div>
	<div class="right">
		<div class="top"></div>
		<div class="down"></div>
	</div>
  </div>

  <div class="single">
	<div class="left"></div>
	<div class="right">
		<div class="top"></div>
		<div class="down"></div>
	</div>
  </div>
 </body>