Question

我正在尝试制作一个弹性（基于em）的CSS布局，其中包含四列和一个横跨左上角两列的框。四列具有相同的宽度（例如20em，边距为1em），左上方的框具有可变高度。

不需要具有相同高度的四列。

我想远离CSS框架和基于-gasp-table的布局。

我正在考虑像这样的HTML结构：

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

Answer 1

<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>

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

1 个答案: