html - 划分垂直列并对齐它们

Question

我正在尝试创建类似于以下布局的布局：

 _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
|      |                     |      |
|      |                     |      |
|      |                     |      |
|  1   |                     |   2  |
|      |                     |      |
|_ _ _ |          5          |_ _ _ |
|      |                     |      |
|      |                     |      |
|   3  |                     |   4  |
|      |                     |      |
|      |                     |      |
|_ _ _ |_ _ _ _ _ _ _ _ _ _ _|_ _ _ |

我在两件事上遇到了麻烦：

1. 划分垂直列；
2. 将 1 和 2 与 5 对齐；

带有示例/代码的网站

Answer 1

#content {
    margin: 20px 0px 0px 20px;
    width:180px;
    background-color: green;
    overflow: auto;
    padding-left: 10px;
}

小提琴

Answer 2

您可以使用 % 来提及垂直列的宽度。您可以使用以下结构，

<div>
    <div class="leftside">
        <div class="1"></div>
        <div class="3"></div>
    <div>

    <div class="Center">
        <div class="5"></div>
    <div>
    <div class="rightside">
        <div class="2"></div>
        <div class="4"></div>
    <div>
</div>

<style>
.leftside
{
    float:left;
    width:15%;
}

.rightside
{
    float:right;
    width:15%;
}
.center
{
    floas:left;
    width:70%;
}

Answer 3

尝试这个，

<div style="width:100%">
<div style="width:15%; float:left">
    <div style="width:100%"></div>
    <div style="width:100%"></div>
</div>
<div style="width:70%; float:left">
</div>
<div>
    <div style="width:100%"></div>
    <div style="width:100%"></div>
</div>
</div>

根据需要设置高度。

Answer 4

试试这个简单的代码

<table border="1">
     <tr><td >1</td><td rowspan="2" colspan="2" width="70%" align= "center" >5</td ><td >2</td></tr>
     <tr><td>3</td><td>4</td></tr>
     </table>

Answer 5

尝试使用这个 CSS 布局： 方形网格

这是一个很棒的布局，可以解决你所有的问题。