使用float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title></title>
<style>
.parent{
margin-left: -20px;
color: #000000;
}
.content{
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="parent">
<div class="content"><p>1</p></div>
<div class="content"><p>2</p></div>
<div class="content"><p>3</p></div>
<div class="content"><p>4</p></div>
</div>
</body>
</html>
使用table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title></title>
<style>
.parent_fix{
margin-left: -20px;
}
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.content{
display: table-cell;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="parent_fix">
<div class="parent">
<div class="content"><p>1</p></div>
<div class="content"><p>2</p></div>
<div class="content"><p>3</p></div>
<div class="content"><p>4</p></div>
</div>
</div>
</body>
</html>
不用设置每个单元格的宽度，因为table-layout默认平分，对于float兼容性好。
使用flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title></title>
<style>
.parent{
display: flex;
width: 100%;
}
.content{
flex: 1;
}
.content+.content{
margin-left: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="content"><p>1</p></div>
<div class="content"><p>2</p></div>
<div class="content"><p>3</p></div>
<div class="content"><p>4</p></div>
</div>
</body>
</html>
一个未知宽高的容器，要被均分为四个相同大小格子（即四个容器），且格子间有10px间距（即十字型空隙），有哪些方法可以解决呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container, .container * { padding: 0; margin: 0; line-height: 0; }
.cell>div { width: 100px; height: 100px; background-color: #598; }
.container {
display: table;
}
.cell {
display: table-cell;
}
.cell>div {
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div>
<div class="cell no1">
<div></div>
</div>
<div class="cell no2">
<div></div>
</div>
</div>
<div>
<div class="cell no3">
<div></div>
</div>
<div class="cell no4">
<div></div>
</div>
</div>
</div>
</body>
</html>
按要求完成能兼容所有浏览器的HTML和CSS：一个不定宽度的容器被分为左中右三列，左右两列定宽100px，中间列自适应剩余宽度，且三列之间间距为10px，效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {height:50px; color: #fff;}
.container *{margin:0;padding:0;}
.container div {height: 100%;}
/*初始设置*/
.left, .right{width: 100px;}
.left{background-color: #f33;}
.right{background-color: #3aa;}
.center{background-color: #e3c;}
.left {float:left;}
.right {float:right;}
.center{padding: 0 110px;margin: 0 110px;}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div>左侧定宽</div>
</div>
<div class="right">
<div>右侧定宽</div>
</div>
<!-- 注意float的特性，文档顺序中的前面的float元素会覆盖在后面的元素的容器之上，
因此居中部分一定要放在文档中的其他两个的最后面 -->
<div class="center">
<div>中间自适应</div>
</div>
</div>
