4列弹性css，左上角框跨越2列。怎么样？

我正在尝试制作一个弹性（基于em）的CSS布局，其中包含四列和一个跨越左上角两列的框。四列的宽度相同（例如20em，边距为1em），左上角的盒子高度可变。4列弹性css，左上角框跨越2列。怎么样？

没有必要具有相同高度的四列。

我想远离CSS框架和基于气表的布局。

我想到的HTML结构是这样的：

<box></box> 
<column1></column1> 
<column2></column2> 
<column3></column3> 
<column4></column4>

来源

2009-12-12 Victor

<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; 
     } 
     #outer {position:relative;} 
     #left {right:50%;} 
     #top_left {position:relative;} 
     #bottom_left {position:relative;} 
     #bottom_left_left {right:50%;} 
     #bottom_left_right {left:50%;} 
     #right {left:50%;} 
     #right_left {right:50%;} 
     #right_right {left:50%;} 
    </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-12 22:44:08

非常感谢你，托尔！来自智利的问候 – Victor 2009-12-12 23:03:06

非常欢迎。 – 2009-12-12 23:09:10

我发布了一个关于这个问题的后续在http://stackoverflow.com/questions/1896857/4-fixed-width-columns-with-top-left-box-spanning-2-columns-centered-how – Victor 2009-12-13 16:11:25

4列弹性css，左上角框跨越2列。怎么样？

回答

相关问题