<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>等分布局解决方法3-flex</title>
<style>
* {
margin: 0;
padding: 0;
}
#parent {
/* 控制排列的方法 - 默认水平排列 */
display: flex;
margin-left: -10px;
}
.col1,
.col2,
.col3,
.col4 {
/* 平分 四个容器各占一等份 1/4 * 100% = 25% */
flex: 1;
height: 300px;
padding-left: 10px;
}
.col1 .inner {
height: 300px;
background-color: hotpink;
}
.col2 .inner {
height: 300px;
background-color: lightblue;
}
.col3 .inner {
height: 300px;
background-color: green;
}
.col4 .inner {
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 作为父级容器 -->
<div id="parent">
<div class="col1">
<div class="inner"></div>
</div>
<div class="col2">
<div class="inner"></div>
</div>
<div class="col3">
<div class="inner"></div>
</div>
<div class="col4">
<div class="inner"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>等分布局解决方法1-float+width</title>
<style>
/* 浮动 100% 等分为4等分 每一等分的大小 100% / 4 = 25%
子元素用了浮动属性 会导致父元素的高度为0
原理: ** 浮动元素没有参与计算 导致父元素的高度塌陷 height: 0 **
** BFC特点的元素: 作用 - 会把浮动元素的高度计算进行 **
** 条件之一的属性 - overflow: hidden **
需要清除浮动
1.height:300px;
2.overflow: hidden; （本身作用 - 溢出隐藏）
3.利用css提供好的一个属性 clear:both 用法： 需要浮动子元素的后面添加一个块级容器
<div style="clear: both;"></div>
4. 伪元素选择器技巧 - after (项目中就最用的方法)
*/
* {
margin: 0;
padding: 0;
}
/* 清除浮动利用.clearfix {} 一般封装 reset.min.css 的末尾 我们直接调用即可 */
.clearfix::after {
/* 三个必备的条件 */
content: '';
display: block;
clear: both;
/* 更全的属性 */
overflow: hidden;
visibility: hidden;
font-size: 0;
height: 0;
width: 0;
}
#parent {
/* 利用margin负值技巧 进行整体移动 - 往左移动 把间距给隐藏起来啦 */
margin-left: -10px;
}
.col1,
.col2,
.col3,
.col4 {
height: 300px;
float: left;
width: 25%;
/* box-sizing: border-box 把padding + border计算进去
实际宽度 = width (border已经计算进去了)
*/
box-sizing: border-box;
border-left: 10px solid #fff;
}
.col1 {
background-color: hotpink;
}
.col2 {
background-color: lightblue;
}
.col3 {
background-color: green;
}
.col4 {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 作为父级容器 -->
<div id="parent" class="clearfix">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>等分布局解决方法2-table+table-cell</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 反向移动 */
.wrap {
margin-left: -10px;
}
#parent {
width: 100%;
display: table;
}
.col1,
.col2,
.col3,
.col4 {
display: table-cell;
padding-left: 10px;
height: 300px;
}
.col1 .inner {
height: 300px;
background-color: hotpink;
}
.col2 .inner {
height: 300px;
background-color: lightblue;
}
.col3 .inner {
height: 300px;
background-color: green;
}
.col4 .inner {
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 作为父级容器 -->
<div class="wrap">
<div id="parent">
<div class="col1">
<div class="inner"></div>
</div>
<div class="col2">
<div class="inner"></div>
</div>
<div class="col3">
<div class="inner"></div>
</div>
<div class="col4">
<div class="inner"></div>
</div>
</div>
</div>
</body>
</html>
