在HTML/CSS中實現三箱佈局

我只想用this layout製作一些HTML頁面。在HTML/CSS中實現三箱佈局

我怎麼能用HTML div和CSS來完成它，無表格。

有一個搜索框，熱門產品和一個廣告框。

來源

2012-01-10 Bias Tegaralaga

你有沒有嘗試過任何東西（我們可以看到它）？ – 2012-01-10 23:07:25

這是我目前的佈局http://dl.dropbox.com/u/50241709/upload/misc/img/layout。PNG 我只是想在搜索框 – 2012-01-10 23:15:51

設置它使用浮動和寬度960px;

您可以根據自己的情況進行調整。

HTML：

<div id="area-wrap"> 
    <div id="hot-product">Hot Product<br />Goes<br />Here</div> 
    <div id="search-box">Search Box</div> 
    <div id="advertisements">Advertisements</div> 
</div>

CSS：

#area-wrap { 
    width:960px; 
} 

#search-box { 
    float:left; 
    background:red; 
    width:450px; 
    margin-left:20px; 
    margin-right:20px; 
    color:#fff; 
    margin-bottom:20px; 
} 

#advertisements { 
    float:left; 
    background:blue; 
    width:450px; 
    margin-left:20px; 
    margin-right:20px; 
    color:#fff; 
} 

#hot-product { 
    float:right; 
    background:green; 
    width:450px; 
    margin-right:20px; 
    color:#fff; 
}

這裏的的jsfiddle：http://jsfiddle.net/82QnL/1/< ---現場演示

希望這有助於！

來源

2012-01-10 23:16:50 Jassi

在這裏，你去！

HTML文件：在同一個目錄

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="test.css"> 
</head> 
<body> 
    <div class="top-left"> 
    top-left 
    </div> 
    <div class="bottom-left"> 
    bottom-left 
    </div> 
    <div class="right"> 
    right 
    </div> 
</body> 
</html>

CSS文件：

.top-left { 
    height: 200px; 
    position: absolute; 
    width: 25%; 
    background-color: blue; 
} 
.bottom-left { 
    height: 200px; 
    position: absolute; 
    width: 25%; 
    top: 220px; 
    background-color: red; 
} 
.right { 
    height: 413px; 
    position: absolute; 
    width: 72%; 
    left: 27%; 
    background-color: green; 
}

來源

2012-01-10 23:10:13 11101101b

下面放一些廣告框，以便您的回覆是稍後的佔位符？ – fcalderan 2012-01-10 23:18:14

我發佈了代碼，我只是想確保它的工作。爲什麼所有人都降級我？ – 11101101b 2012-01-10 23:27:37

感謝您的答案男人，我已經做到了，沒有立場：D – 2012-01-10 23:29:41

試試這個

<div id="wrapper"> 
    <div id="leftTop" style="position: absolute;height: 200px;width: 300px;border: 1px solid black;"></div> 
    <div id="leftBottom" style="position: absolute;top: 220px;height: 200px;width: 300px;border: 1px solid black;"></div> 
    <div id="right" style="position: absolute;left: 320px;height: 410px;width: 300px;border: 1px solid black;"> 
    </div> 

</div>

，看到一個工作示例here

來源

2012-01-10 23:13:57 jacktheripper

感謝的人，但我需要在我的網頁上的位置：絕對似乎不起作用 – 2012-01-10 23:17:49

如果您尋找全尺寸的頁面，靈活的佈局，你可以這樣做：

現場演示：http://jsfiddle.net/GPDBs/1/

HTML：

<div id="search"> 
    Search 
</div> 
<div id="ads"> 
    Ads 
</div> 
<div id="product"> 
    Hot Product 
</div>

CSS：

#search{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    right:50%; 
    bottom:40%; 
    background-color:blue; 
} 
#product{ 
    position:absolute; 
    top:0px; 
    right:0px; 
    left:50%; 
    bottom:0px; 
    background-color:green; 
} 

#ads{ 
    position:absolute; 
    top:60%; 
    left:0px; 
    right:50%; 
    bottom:0; 
    background-color:red; 
}

我希望這有助於:-)

來源

2012-01-10 23:16:45 Qorbani

謝謝，但我不能使用它:) – 2012-01-10 23:23:40

有什麼我可以幫忙嗎？你想要絕對定位嗎？也許如果你能解釋更多，我可以幫你:) – Qorbani 2012-01-11 00:11:33

或者你可以試試這個：http://jsfiddle.net/eRJH3/

來源

2012-01-10 23:16:57 Matmarbon

沒有絕對的位置 - > http://jsfiddle.net/eRJH3/15/ – Piotr 2014-11-20 08:46:02

這是一個非常簡單的設計，製造，檢查了這一點：

HTML

<div class="container"> 
    <div class="search"> 
     search 
    </div> 
    <div class="products"> 
     products 
    </div> 
    <div class="ads"> 
     ads 
    </div> 
</div>

CSS

.container { 
    width:960px; 
    margin:0 auto; 
} 

.search, .ads, .products { 
    background-color:#aaa; 
    margin:0 0 5px 5px; 
} 

.search, .ads { 
    width:400px; 
    float:left; 
} 

.search { 
    height:200px; 
} 

.ads { 
    height:100px; 
} 

.products { 
    width:550px; 
    height:305px; 
    float:right; 
}

演示http://jsfiddle.net/andresilich/xxbU5/show/

來源

2012-01-10 23:31:02

在HTML/CSS中實現三箱佈局

回答

相關問題