完成flex布局和float布局

最新推荐文章于 2024-09-02 17:34:07 发布

MorningStar_cao

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量113

点赞数

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/MorningStar_cao/article/details/133189589

版权

float布局

float俩栏布局

<body>
 <div style ="height: 500px;width:200px;">
</div>
<div style="float: left;background-color: aqua;width: 100px;height: 300px;">
</div>
<div style="background-color: bisque;width: 300px;height: 400px;padding: left 10px;;">
</div>
</body>

<!DOCTYPE html>
</html>
    <head>
        <meta charset="utf-8">
        <title>float</title>
    </head>
    <body>
        <div style="float:left;height: 188px;width: 700px;background-color: blue;">
        </div>
        <div style="float:right;width: 600px;height: 600px;background-color: aqua;">
        </div>
        <div style="background-color: aquamarine;width: 600px;height: 300px;">
        </div>
    </body>
    </body>

flex布局

<!DOCTYPE html>
<html>
    <title>felx</title>
<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>