float布局
float 的两栏布局和三栏布局
两栏布局
<body>
<div style="width: 800px;height: 200px;">
<div style="float: left;background: red;width: 200px;height: 100%;">
左
</div>
<div style="background: blue;margin-left: 200px;height: 100%;padding-left: 10px;">
右
</div>
</div>
</body>
三栏布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float</title>
</head>
<body>
<div style="width:800px;height:200px;">
<div style="float:left;background:red;width:200px;height:100%;">
左
</div>
<div style="float:right;background:blue;width:200px;height:100%;">
右
</div>
<div style="background:yellow;width:400px;margin-left: 200px;height:100%;">
中
</div>
</div>
</body>
flex布局
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.column {
flex: 1;
padding: 20px;
}
.column:first-child {
background-color: #f2f2f2;
}
</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>
扫一扫
1346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
