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

页面布局应用,将三个div如下图排布。
div 页面布局 -- css 浮动应用_第1张图片
这个会在显示个人信息的时候展示,红色的部分是头像;黄色的部分是固定的信息;蓝色的部分是可变的信息,且信息的长度不固定。
总体上看,红色为左侧部分,黄色和蓝色为右侧部分。
详细的页面代码如下,显示的是三个入上结构且添加 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>

div 页面布局 -- css 浮动应用_第2张图片
因为是指定了左侧和右侧的高度和长度,结构是乖乖的按照所想的排不了。在使用中同一个 single 中的左侧和右侧会因为未指定宽度而出现左右侧上下排布的状况,可以指定左右两侧的宽度用 百分比,避免固定宽度,也可以达到这个效果。

你可能感兴趣的:(css)