Question

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

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

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

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

The website with the example/code

Answer 1

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

FIDDLE

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布局： The Square Grid

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

划分垂直列并对齐它们

5 个答案: