如何在html中創建特定的佈局？

我想在html中創建特定的佈局，但有一些困難。如何在html中創建特定的佈局？

圖像相比，是容易話說明白，所以這裏是我：

enter image description here

這是好的，但只要DIV1得到heigher，我都會有這樣的：

enter image description here

而我的目標是有這樣的事情：

enter image description here

目前，我使用div，這可能不是個好主意。歡迎任何幫助。非常感謝您提前。

來源

2013-02-19 Miloš

div嵌套的..？ – 2013-02-19 09:44:21

我已經嘗試創建3個div，這是給我的第二個圖像結果。然後我嘗試使用簡單的標籤而不是第三個div，結果仍然相同。 – 2013-02-19 09:45:12

@Mr_Green，對不起？ – 2013-02-19 09:45:32

Divs是一個很好的方式來做到這一點。您可以在兩個右側div上使用包含div的浮動佈局。下面是一些代碼向你展示我的意思：

HTML

<div id="wrapper" class="clearfix"> 
    <div id="sidebar"></div> 
    <div id="main_content"> 
     <div id="top_right"></div> 
     <div id="bottom_right"></div> 
    </div> 
</div>

CSS

#wrapper { background: #44BBF0; } 
#sidebar { float: left; width: 100px; height: 500px; background: #485F40; } 
#main_content { float: right; } 
#top_right { width: 200px; height: 200px; background: #FF553F; } 
#botom_right { width: 200px; height: 300px; background: #B0DE91; } 

.clearfix:before, 
.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    overflow: hidden; 
} 

.clearfix:after { 
    clear: both; 
} 

.clearfix { 
    zoom: 1; /* IE < 8 */ 
}

下面是一個JS撥弄鏈接，告訴你它的外觀：http://jsfiddle.net/ddxYB/

確保清除包裝div。因爲它只包含浮動元素，所以如果沒有，它將沒有高度。在我使用的例子中，我設置了高度來節省時間，但是如果使用自動高度並讓div接受內容的高度，那麼這也是一樣。

這是從的jsfiddle代碼截圖：

This is a screenshot from the JSFiddle code

來源

2013-02-19 09:56:42 Hendeca

完美，這就是我一直在尋找的。 – 2013-02-19 10:45:30

我遇到了一個問題，你能否幫我一下。在JSFiddle中設置時：'#sidebar {float：left;寬度：100px; height：50px;背景：＃485F40; }'那麼藍色div就在橙色div的左邊，它應該在橙色div的底部。 – 2013-02-19 11:04:39

@Milos哎呀！我的錯誤，我在CSS中有一個錯字！我不小心將#right_bottom拼寫爲#right_botom。這裏是固定的jsFiddle：http://jsfiddle.net/ddxYB/4/ – Hendeca 2013-02-19 11:51:41

-3

將每個div的CSS位置設置爲絕對值，並使用margin來定位它們。

#divName { 
position: absolute; 
margin: 10px 10px 10px 10px; //position them wherever you want. 
}

來源

2013-02-19 09:47:12 crimsoniris

絕對位置不是開始的好方法。 – jjj 2013-02-19 09:55:15

首先，你必須瞭解容器的概念。

爲列創建2個容器：

含有A左欄DIV1
含有DIV2和DIV3

所以對於HTML右列創建結構像這樣：

<div class="col1"> 
    <div>div 1</div> 
</div> 

<div class="col2"> 
    <div>div 2</div> 
    <div>div 3</div> 
</div>

和定位柱與CSS：

div.col1 { 
    float: left; 
    width: 200px; 
} 

div.col2 { 
    float: left; 
    width: 400px; 
}

來源

2013-02-19 10:03:55 jjj

這是nt工作來獲得像圖1所述的東西。屏幕的左側將是空白的。 – 2013-02-19 11:13:03

這不是最終結果，而是解釋div容器（列）的使用。重要的一步。 – jjj 2013-02-19 11:16:22

好的，對不起。你有什麼想法如何實現我的目標？ – 2013-02-19 11:18:55

如何在html中創建特定的佈局？

回答

相關問題