第一种方式 float +box-sizing
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,p{
padding: 0;
margin: 0;
}
.column{
width: 25%;
float: left;
padding-left: 10px;
box-sizing: border-box;
}
.column p{
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="column"><p>内容1</p></div>
<div class="column"><p>内容1</p></div>
<div class="column"><p>内容1</p></div>
<div class="column"><p>内容1</p></div>
</div>
</body>
</html>
但是具有耦合性去掉一列的话还要修改样式这是它的不足之处
第二种方式 display:table
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,p{
padding: 0;
margin: 0;
}
.parent{
display: table;
width: 100%;
}
.column{
display: table-cell;
padding-left: 10px;
}
.column p{
background: greenyellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="column"><p>内容1</p></div>
<div class="column"><p>内容1</p></div>
<div class="column"><p>内容1</p></div>
<div class="column"><p>内容1</p></div>
</div>
</body>
</html>
第三种方式 flex
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,p{
padding: 0;
margin: 0;
}
.parent{
display: flex;
}
.column{
background: yellowgreen;
flex: 1;
margin-left: 10px;
}
.column p{
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="column"><p>内容1</p></div>
<div class="column"><p>内容1</p></div>
<div class="column"><p>内容1</p></div>
<div class="column"><p>内容1</p></div>
</div>
</body>
</html>
