製作4塊佈局（2疊加）

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

我只是打了一點與浮動，看看是什麼一樣。

來源

2014-10-07 Tommyisk4

這個問題在我看來太寬泛了。如果它關閉，我不會感到驚訝。如果你提供了一些能證明你有多遠的代碼，它會更好，並且你有更高的機會得到有用的答案。 – kkuilla 2014-10-07 14:27:50

那麼，我很新的CSS/HTML，我不知道如何做到這一點。這是我能想到的最好的： http://s8.postimg.org/q2sx5rg85/layout.png – Tommyisk4 2014-10-07 14:31:03

@ Tommyisk4在繼續之前，請確保您瞭解像'float'這樣的基本CSS屬性。在這裏得到答案只會在短期內幫助你，如果你缺乏CSS基礎，你將在處理佈局時遇到很多麻煩。好的是有很多資源可以在線學習CSS。這是我對初學者的建議：[http://www.codecademy.com/en/tracks/web](http://www.codecademy.com/en/tracks/web） – Alternatex 2014-10-07 14:37:30

這應該對你有所幫助：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; 
}

來源

2014-10-07 14:32:27

非常感謝！ :) – Tommyisk4 2014-10-07 14:48:54

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>

來源

2014-10-07 14:39:37 user3267755

製作4塊佈局（2疊加）

回答

相關問題