先看看等分的布局方案
1. float
兼容性较好（IE 8以上）
**2. flex **
兼容性较差（flex属于css3）
兼容性：IE8及以上
3. table
兼容性：可以兼容 IE 8
1. table
利用 table 的特性——每列等宽
2. flex
3. float
伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
在css中hover用于选择鼠标指针浮动在上面的元素，语法“标签选择器:hover{样式代码}”，用法：1、直接在悬浮元素上改变样式；2、改变子元素的样式；3、改变同级元素的样式；4、改变就近元素的样式等。
在CSS中有个hover属性，当鼠标移上去的时候可以将其激活，它可以用来实现类似于js的一些功能。
<html><head>
<meta charset="UTF-8"/>
<title>端午节快乐</title>
</head>
<style type="text/css">
*{margin: 0padding: 0}
div{width: 400pxheight: 400px color: red border: 5px cornflowerblue solidposition: fixedtop: 0overflow: hiddenborder-radius:50% column-count:6 column-gap: 30px
-webkit-column-gap:30px-webkit-column-count:6 font-size: 2em}
#a{color: chartreuse}
#b{ transform:rotate(45deg) -webkit-transform: rotate(45deg)}
#c{width:300pxheight: 300pxbackground:redborder-radius:50%position: fixedtop:50px left: 50px}
span{width:1pxheight:300pxposition: absolutetop:0left:150pxbackground:navajowhite}
.a{transform:rotate(60deg)-webkit-transform: rotate(60deg)background:darkmagenta}
.b{transform:rotate(90deg)-webkit-transform: rotate(90deg)background:turquoise}
.c{transform:rotate(120deg)-webkit-transform: rotate(120deg)background: yellow}
.d{transform:rotate(150deg)-webkit-transform: rotate(150deg)background: mistyrose}
.e{transform:rotate(180deg)-webkit-transform: rotate(180deg)background: greenyellow}
.f{transform:rotate(30deg)-webkit-transform: rotate(30deg)background:blue}
</style>
<body>
<div id="a" class="div">
端午节快乐端午节快乐端午节 快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节 快乐端午节快乐端午节快乐端午节快乐
</div>
<div id="b" class="div">
端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐
</div>
<div id="c">
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
<span class="d"></span>
<span class="e"></span>
<span class="f"></span>
</div>
</body>
</html>
