制作4块布局(叠加2块)

时间:2014-10-07 14:19:13

标签: html css layout

我想像这样的4块布局:

enter image description here

我一直在尝试漂浮,但我真的不掌握它。

我该怎么做?

由于

我的HTML代码:

<div id="colonne_gauche">1</div>

<div id="colonne_gauche2">2</div>

<div id="colonne_droite">4</div>

<div id="colonne_centre">3</div>

我的CSS代码:

#colonne_gauche
{
    margin-top: 5px;
    -float: left;
    width: 420px;
    height: 145px;
    border: 1px solid #818181;
    background: red;
}

#colonne_gauche2
{
    float: left;
    margin-top: 5px;
    width: 420px;
    height: 145px;
    border: 1px solid #818181;
    background: orange;
}

#colonne_centre
{
    float: right;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    width: 310px;
    height: 295px;
    border: 1px solid #818181;
    background: green;
}

#colonne_droite
{
    float: right;
    margin-top: 5px;
    width: 220px;
    height: 295px;
    border: 1px solid #818181;
    background: blue;
}

我只是玩了一下漂浮,看看它是做什么的。

2 个答案:

答案 0 :(得分:0)

这可以帮助您:DEMO

HTML:

<div id="header">Header</div>
<div id="stackleft">
    <div id="one">1</div>
    <div id="two">2</div>
</div>
<div id="stackright">
    <div id="three">3</div>
    <div id="four">4</div>
</div>

CSS:

#header {
    width: 960px;
    padding: 50px 0px;
    color: black;
    border: 1px solid black;
    margin: 5px;
    text-align: center;
}
#one {
    width: 420px;
    text-align: center;
    padding: 0px;
    height: 145px;
    color: black;
    border: 1px solid black;
    margin: 5px;
}
#two {
    width: 420px;
    text-align: center;
    padding: 0px;
    height: 145px;
    color: black;
    border: 1px solid black;
    margin: 5px;
}
#three {
    width: 310px;
    text-align: center;
    padding: 0px;
    height: 295px;
    color: black;
    border: 1px solid black;
    margin: 5px;
    display: inline-block;
}
#four {
    width: 220px;
    text-align: center;
    padding: 0px;
    height: 295px;
    color: black;
    border: 1px solid black;
    margin: 5px;
    display: inline-block;
}
#stackleft, #stackright {
    display: inline-block;
    vertical-align: top;
}

答案 1 :(得分:0)

http://jsfiddle.net/xam558e3/

在其他DIV中使用DIV,您可以轻松控制它们的显示方式和显示位置。你应该查看盒子模型,它可能会为你提供一些亮点。

<div style="width:310px">
    <div style="width:303px; height: 100px; background-color: #6495ed;"></div>
    <div style="width:100px; height: 100px; background-color: red;  float:left; margin: 1px;"></div>
    <div style="width:100px; height: 100px; background-color: red;  float:left; margin: 1px;"></div>
    <div style="width:100px; height: 100px; background-color: red;  float:left; margin: 1px;"></div>
    <div style="width:303px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
</div>