等寬佈局
- float
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.parent {
margin-left: -20px;
}
.column {
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;/*意味着25%的寬度包含padding值*/
}
.column :nth-child(odd) {
background: #666;
}
</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>公式： C = W*N＋G*(N-1) –> C = (w+G)*N –>C+G = (W+G)*N
2.table
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.parent-fix {
margin-left: -20px;
}
.parent {
display: table;
table-layout: fixed; /*佈局優先情況下每列相等*/
width: 100%;
}
.column {
display: table-cell;
padding-left: 20px;
}
</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>3.fixed
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.parent {
display: flex;
}
.parent > .column:nth-child(odd) {
background-color: #666;
}
.parent > .column:nth-child(even) {
background-color: #999;
}
.column {
flex: 1;
}
.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 class="column"><p>5</p></div>
</div>
</body>
</html>等高佈局
- table
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left,.right {
display: table-cell;
}
.left {
width: 100px;
background: #999;
padding-right: 20px;
}
p {
background: #666;
}
.right {
background: #999;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>2.flex
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.left {
width: 100px;
margin-right: 20px;
background: #999;
}
.right {
flex: 1;
background: #666;
}
.parent {
display: flex;
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>3.float
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.left {
background: #999;
float: left;
width: 100px;
margin-right: 20px;
}
.right {
background: #666;
overflow: hidden;
}
.left,.right {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.parent {
height: 100%;
overflow: hidden;
}
input[checked]{
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
<input type="radio" name="show">
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>