html - 制作 4 block 布局(2 叠加)

Question

我想要一个像这样的 4 block 布局:

我一直在尝试使用 float，但我真的没有掌握它。

我该怎么做？

谢谢

我的 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;
}

我只是玩了一下 float ，看看它有什么作用。

Answer 1

这应该可以帮助您: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;
}