html做三横两列布局

三横两列布局一般使用HTML的`<div>`元素和CSS的浮动布局实现。

HTML代码如下：

<div class="container">
  <div class="left-column">
    <!-- 左侧内容 -->
  </div>
  <div class="right-column">
    <div class="top-row">
      <!-- 右上内容 -->
    </div>
    <div class="bottom-row">
      <!-- 右下内容 -->
    </div>
  </div>
</div>

CSS代码如下：

.container {
  width: 100%;
  overflow: hidden; /* 清除浮动 */
}

.left-column {
  width: 30%;
  float: left;
}

.right-column {
  width: 70%;
  float: right;
}

.top-row {
  height: 50%;
}

.bottom-row {
  height: 50%;
}

其中，左侧列使用`float: left;`向左浮动，宽度为30%；右侧列使用`float: right;`向右浮动，宽度为70%；右侧列中的上下两行设置高度为50%。使用`overflow: hidden;`清除浮动，使得容器可以正常显示。