2

因此，我将 div 用于列，并且可以说要合并两个“单元格”。我在下面有一个我想要的布局，并希望将底部的两个 div 合并到一个 div 中。

我无法发布图片，所以这里是我想要的链接：http: //i.stack.imgur.com/ZIgNV.jpg

以下是我的html代码：

<div class="grid">
    <div class="column">
        <div class="width1 height1 grid_item"></div>
        <div class="width1 height2 grid_item"></div>
        <div class="width1 height1 grid_item"></div>
    </div>
    <div class="column">
        <div class="width1 height2 grid_item"></div>
        <div class="width1 height1 grid_item"></div>
        <div class="width1 height1 grid_item"></div>
    </div>
    <div class="column">
        <div class="width2 height1 grid_item"></div>
        <div class="width2 height2 grid_item"></div>
        <div class="width2 height1 grid_item"></div>
    </div>
    <div class="column">
        <div class="width2 height1 grid_item"></div>
        <div class="width2 height1 grid_item"></div>
        <div class="width2 height1 grid_item"></div>
        <div class="width2 height1 grid_item" style="text-align:right">merge --&gt;</div>
    </div>
    <div class="column">
        <div class="width1 height3 grid_item"></div>
        <div class="width1 height1 grid_item"> &lt;--merge</div>
    </div>  
</div>

以下是我的CSS：

.height1{
height:160px;

}
.height2{
height:320px;   
}
.height3{
height:484px;   
}
.width1{
width:174px;
}
.width2{
width:213px;
}
.width3{
width:391px;
position:relative;
float:inherit;  
}
.grid_item{
margin:2px;
background-color:green;
}
.column{
position:relative;
float: left;    
}
4

0 回答 0