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;`清除浮动，使得容器可以正常显示。

相关问题

html三行两列div布局

这个HTML三行两列的布局是由著名网页设计师阿捷在2004年发布在《网页设计师》杂志上的，被称为XHTML1标准的DIV CSS布局。它是一个非常经典的布局，可以在IE、Mozilla和Opera浏览器中实现居中和高度自适应。完整的代码如下所示：

<!-- 双飞翼布局 -->
<div class="container">
  <div class="middle">
    <div class="inner">中间自适应</div>
  </div>
  <div class="left">左边固定宽度200px</div>
  <div class="right">右边固定宽度200px</div>
</div>

对应的CSS代码如下所示：

<style>
  * { margin: 0; padding: 0; }
  .container {
    min-width: 600px;
    height: 300px;
    background: pink;
  }
  .middle {
    float: left;
    width: 100%;
    height: 300px;
    background-color: turquoise;
  }
  .middle .inner {
    margin: 0 200px;
  }
  .left {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: teal;
  }
  .right {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -200px;
    background-color: seagreen;
  }
</style>

这种布局的主要特点是中间的自适应部分被嵌套在一个新的父级块中，通过设置左右外边距来实现布局调整。左边和右边的固定宽度部分则通过负外边距进行布局。这种布局可以有效地实现三行两列的效果。注意，这种布局方式增加了一层DOM树节点，可能会增加渲染树生成的计算量。

extjs中创建三行两列布局

在 ExtJS 中，可以使用 `Ext.container.Container` 组件来创建布局容器，然后在容器中添加子组件来实现布局。

要创建一个三行两列布局，可以使用 `Ext.container.Container` 组件的 `layout` 属性设置为 `table`，并在容器中添加子组件时指定行列信息。示例代码如下：

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    layout: {
        type: 'table',
        columns: 2
    },
    items: [
        {
            xtype: 'panel',
            title: 'Panel 1',
            rowspan: 2 // 占据两行
        },
        {
            xtype: 'panel',
            title: 'Panel 2'
        },
        {
            xtype: 'panel',
            title: 'Panel 3',
            colspan: 2 // 占据两列
        },
        {
            xtype: 'panel',
            title: 'Panel 4'
        },
        {
            xtype: 'panel',
            title: 'Panel 5'
        }
    ]
});

上面的代码中，创建了一个布局容器，设置布局类型为 `table`，列数为 2。然后添加了 5 个子组件，指定它们的行列信息，从而实现了一个三行两列的布局。