完成flex布局与float布局

最新推荐文章于 2024-05-21 23:21:19 发布

小陈爱锻炼

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量230

点赞数

分类专栏： web前端文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_64747212/article/details/132994043

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

效果图