方法一：弹性布局（flex）

<!-- 代码 -->
<body>
    <div style="display: flex; height:100%">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

/* CSS代码 */
/* 消除浏览器默认 */
/* 三处 height:100% 实现div高度撑满*/
html,body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.left {
  flex: 1;
  height: 100%;
  background: #ff0;
}
.right {
  flex: 1;
  height: 100%;
  background: #f0f;
}

方法二：浮动布局（float）

<!-- HTML代码 -->
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

/* CSS代码 */
html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
.left {
    float: left;
    width: 50%;
    height: 100%;
    background: #ff0;
}
.right {
    float: right;
    width: 50%;
    height: 100%;
    background: #f0f;
}

方法三：使用表格布局（table）

<!-- HTML代码 -->
<body>
    <div style="display: table; height:100%; width: 100%">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

/* CSS代码 */
html,body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.left {
  display: table-cell;
  height: 100%;
  background: #ff0;
}
.right {
  display: table-cell;
  height: 100%;
  background: #f0f;
}

HTML+CSS 左右布局的实现方法

方法一：弹性布局（flex）

方法二：浮动布局（float）

方法三：使用表格布局（table）