1. 首頁
  2. 問答
  3. 如何使用html和css創建這個特定的佈局？

如何使用html和css創建這個特定的佈局？

2011-01-26 170 views

回答

2

@Bmaster

嗨，老兄，我擺弄周圍，終於找到了我認爲是你「再要求...看看：

http://jsfiddle.net/2pXpN/

Preview of the layout

對我來說是越來越文本決定整個事情的高度最難的部分 - 但之後，我不再試圖用花車，它都解決了;）

嘗試增加一些文字，等等它應該工作！

編輯：我不確定你是否想要頂部的'header'，但是我在這裏放置了一個：http://jsfiddle.net/bHhd8/。 *注意，它在包裝外，否則側欄會變得太高！

來源

2011-01-26 22:21:26 jlmakes

1

有一些它我不喜歡，但它確實有效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
     body 
     { 
      padding: 0; 
      margin: 0; 
     } 

     #content 
     { 
      background-color: #cccccc; 
      min-height: 100%; 
     } 

     #header 
     { 
      height: 40px; 
      background-color: #666666; 
     } 

     #left 
     { 
      float: left; 
      width: 33%; 
     } 

     #mid 
     { 
      margin: 0 33%; 
      background-color: #6666ff; 
     } 

     #right 
     { 
      float: right; 
      width: 33%; 
      margin-top: -50px; 
     } 

     .fixedHeight 
     { 
      height: 50px; 
      background-color: #ffff33; 
     } 

     #left .fixedHeight 
     { 
      margin-right: 10px; 
      margin-bottom: 10px; 
     } 

     #right .fixedHeight 
     { 
      margin-left: 10px; 
     } 

     .clear 
     { 
      clear: both; 
     } 
    </style> 
</head> 
<body> 
    <div id="header"> 
     header 
    </div> 
    <div id="content"> 
     <div id="left"> 
      <div class="fixedHeight"> 
       fixed 
      </div> 
      <div class="fixedHeight"> 
       fixed 
      </div> 
     </div> 
     <div id="mid"> 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
     </div> 
     <div class="clear"></div> 
     <div id="right"> 
      <div class="fixedHeight"> 
       fixed 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2011-01-26 22:18:10 mynameiscoffey

1

由於ornage盒子的高度是固定的，所以可以絕對放置它們。對於右下角的。這應該是自explanitory：

.orange-box { 
    width:33%; 
    height:100px; 
    position:absolute; 
} 

.orange-box.top-left-1 { top:0; left:0; } 
.orange-box.top-left-2 { top:100px; left:0; } 
.orange-box.bottom-right { bottom:0; right:0; }

藍色區域應與另一個DIV

width:33%; 
margin:0 auto

來源

2011-01-26 22:20:16 meagar

1

在審查了其他似乎並不完全得到你想要的答案後，我決定拋出我自己的jsfiddle answer。

比解決問題更重要的是幫助您瞭解解決方案，這需要了解floats,clears和positioning。

這些列由#footer清除，它當前不包含任何內容，但有助於將頁面大小擴展到包裝以外。

#page元素相對定位，因此絕對定位的子元素將相對於它定位，而不是body。

來源

2011-01-26 23:19:50 zzzzBov

+0

謝謝你幫助我理解，+1 – bmaster 2011-01-30 02:14:37

相關問題

 相關問題