使用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>
不用設(shè)置每個(gè)單元格的寬度，因?yàn)閠able-layout默認(rèn)平分永高，對(duì)于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>
一個(gè)未知寬高的容器，要被均分為四個(gè)相同大小格子（即四個(gè)容器）命爬，且格子間有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：一個(gè)不定寬度的容器被分為左中右三列饲宛，左右兩列定寬100px皆愉，中間列自適應(yīng)剩余寬度，且三列之間間距為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%;}
/*初始設(shè)置*/
.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>左側(cè)定寬</div>
</div>
<div class="right">
<div>右側(cè)定寬</div>
</div>
<!-- 注意float的特性幕庐，文檔順序中的前面的float元素會(huì)覆蓋在后面的元素的容器之上，
因此居中部分一定要放在文檔中的其他兩個(gè)的最后面 -->
<div class="center">
<div>中間自適應(yīng)</div>
</div>
</div>
