4個固定寬度的列，左上方框跨2列。居中。怎麼樣？

每列的固定寬度爲200px，邊距爲20px。
左上角的框和列的高度可變。4個固定寬度的列，左上方框跨2列。居中。怎麼樣？

喜歡這張

alt text

托爾Valamo友好提供一個answer to a similar question（即具有彈性，這是固定的），但我不能中心的佈局，因爲它使用position: absolute。

我該怎麼辦？我知道使用帶有colspan和rowspan的表格，這個問題的答案很簡單，但我想避免像鼠疫這樣的基於表格的佈局！

來源

2009-12-13 Victor

爲什麼，當然使用表佈局！*（鴨子和跑）* ;-) – 2009-12-13 15:53:30

不知道我確切地理解你在問什麼，但是這樣的事情......？

<div style="float: left;"> 
    <div style="width: 420px;">top</div> 
    <div style="width: 200px; float: left;">bottom left</div> 
    <div style="width: 200px; float: left;">bottom right(ish)</div> 
    <div style="clear: both;"></div> 
</div> 
<div style="width: 200px; float: left;">big left box</div> 
<div style="width: 200px; float: left;">big right box</div>

來源

2009-12-13 15:46:21

謝謝大衛，但似乎沒有工作 – Victor 2009-12-13 16:09:46

很正確。我編輯過。 – 2009-12-13 19:04:53

謝謝大衛！ – Victor 2009-12-14 12:50:40

儘管存在position: absolute，您仍然可以使用鏈接到的佈局並使其居中。我已經在這裏調整了它（你將不得不調整以補充邊距，但它的工作原理，我測試了它：

<html> 
<head> 
    <style> 
     #outer, #left, #right, #top_left, #bottom_left, 
     #bottom_left_left, #bottom_left_right, #right_left, #right_right { 
      position:absolute; 
      top:0; 
      right:0; 
      bottom:0; 
      left:0; 
      border:1px solid #000; 
     } 
     #outer {margin:0 auto; position:relative;width:800px;} 
     #left {right:50%;width:400px;} 
     #top_left {position:relative; width:400px;} 
     #bottom_left {position:relative;} 
     #bottom_left_left {right:50%; width:200px;} 
     #bottom_left_right {left:50%; width:200px;} 
     #right {left:50%;} 
     #right_left {right:50%; width:200px;} 
     #right_right {left:50%; width:200px;} 
    </style> 
</head> 
<body> 
    <div id="outer"> 
     <div id="left"> 
      <div id="top_left">Top left</div> 
      <div id="bottom_left"> 
       <div id="bottom_left_left">Bottom left</div> 
       <div id="bottom_left_right">Bottom right</div> 
      </div> 
     </div> 
     <div id="right"> 
      <div id="right_left">Near Right</div> 
      <div id="right_right">Far Right</div> 
     </div> 
    </div> 
</body> 
</html>

來源

2009-12-13 16:16:15

4個固定寬度的列，左上方框跨2列。居中。怎麼樣？

回答

相關問題