Question

我想像这样的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;
}

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

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

Answer 2

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>

制作4块布局（叠加2块）

2 个答案: