切图布局知识点（三）——左右布局

时间 2019-11-13

标签布局知识左右繁體版

原文原文链接

在css布局中，咱们在不少状况下须要一变随浏览器宽度变更而变更css

左侧固定html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>左右布局</title>
  <style>
  html,body{
    height: 100%;
  }
  .left {
    float: left;
    width: 80px;
    height: 100%;
    background-color: red;
  }
  .right{
    height: 100%;
    margin-left: 80px;
    background-color: blue;
  }
  </style>
</head>

<body>
  <div class="left"></div>
  <div class="right"></div>
</body>

</html>

右侧固定浏览器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>左右布局</title>
  <style>
  html,body{
    height: 100%;
  }
  .right{
    float: right;
    width: 80px;
    height: 100%;
    background-color: red;
  }
  .left {
    height: 100%;
    margin-right: 80px;
    background-color: blue;
  }
  </style>
</head>

<body>
  <div class="right"></div>
  <div class="left"></div>
</body>

</html>