Question

每列的固定宽度为200px，边距为20px 左上角的框和列的高度可变。

喜欢这个

alt text

Tor Valamo亲切地提供了一个answer to a similar question（有弹性，这是固定的），但我不能将布局集中在一起，因为它使用position: absolute。

我该怎么办？我知道使用带有colspan和rowspan的表这个问题的答案是微不足道的，但我想避免像瘟疫一样的基于表格的布局！

Answer 1

我不确定我到底知道你在问什么，但这样的事情......？

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

Answer 2

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

4个固定宽度的列，左上方框格跨越2列。居中。怎么样？

2 个答案: