- 效果图
- 等分公式
说明：总宽度C,个子div宽度w,个数N,子div间距G
思路一float
- box-sizing：border-box; div宽度包含padding宽度；
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.parent{
margin-left: -20px;
}
.column{
float: left;
width: 25%;
padding-left: 20px;
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
</body>
</html>
思路二table
- 父容器display：table，子容器display：table-cell 单元格；
- table-layout：fixed； 子容器等分父容器；
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.parent-fix{
margin-left: -20px;
}
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.column{
display: table-cell;
padding-left: 20px;
background-color: #3333CC
}
</style>
</head>
<body>
<div class="parent-fix">
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
</div>
</body>
</html>
思路三flex
- flex:1; 默认的是平分空间；
- .column+.column选择器：在 div和div之间；
- flex分配的剩余空间，它会先除掉margin-left的值；
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.parent{
display: flex;
}
.column{
flex:1;
background-color: #3333CC
}
.column+.column{
margin-left: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
</body>
</html>
时间： 2024-11-13 17:52:55