我想像这样的4块布局:
我一直在尝试漂浮,但我真的不掌握它。
我该怎么做?
由于
我的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;
}
我只是玩了一下漂浮,看看它是做什么的。
答案 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)
在其他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>