1.float 的两栏布局和三栏布局
(1)两栏布局
代码:
<body>
<div style="width: 800px;height: 200px;">
<div style="float: left;background: rgb(49, 226, 117);width: 200px;height: 100%;">
1
</div>
<div style="background: rgb(180, 212, 38);margin-left: 200px;height: 100%;padding-left: 10px;">
2
</div>
</div>
</body>
(2)三栏布局
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float</title>
</head>
<body>
<div style="width:800px;height:200px;">
<div style="float:left;background:rgb(65, 115, 173);width:200px;height:100%;">
1
</div>
<div style="float:right;background:rgb(179, 117, 165);width:200px;height:100%;">
3
</div>
<div style="background:rgb(61, 167, 96);width:400px;margin-left: 200px;height:100%;">
2
</div>
</div>
</body>
2.flex布局
代码:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.column {
flex: 1;
padding: 20px;
}
.column:first-child {
background-color: #00FFFF;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<p>This is the left column.</p>
</div>
<div class="column">
<p>This is the right column.</p>
</div>
</div>
</body>
</html>