Css 4根固定宽度的柱子，左上角的盒子横跨2根柱子。居中的。怎么用？_Css

Css 4根固定宽度的柱子，左上角的盒子横跨2根柱子。居中的。怎么用？

css

Css 4根固定宽度的柱子，左上角的盒子横跨2根柱子。居中的。怎么用？,css,Css,每列的固定宽度为200px，边距为20px。左上方的框和列具有可变高度像这样 Tor Valamo善意地提供了一个（弹性，这是固定的），但我不能将布局居中，因为它使用了位置：绝对我怎么做？我知道使用带有colspan和rowspan的表解决这个问题是很简单的，但是我想避免像瘟疫一样基于表的布局我不确定我是否完全理解你的要求，但像这样的事情 <div style="float: left;"> <div style="width: 420px;">top&

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

像这样

Tor Valamo善意地提供了一个（弹性，这是固定的），但我不能将布局居中，因为它使用了

位置：绝对
我怎么做？我知道使用带有colspan和rowspan的表解决这个问题是很简单的，但是我想避免像瘟疫一样基于表的布局
 我不确定我是否完全理解你的要求，但像这样的事情
<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>


顶部
左下角
右下角（ish）
左大盒子
右大盒子
我不确定我是否完全理解您的要求，但类似这样的问题
<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>


顶部
左下角
右下角（ish）
左大盒子
右大盒子
您仍然可以使用链接到的布局，并使其居中，尽管有位置：绝对
。我在这里为您调整了它（您必须调整以添加边距，但它可以工作，我测试了它：
<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> 


#外、左、右、左上、左下、，
#左下、左下、右下{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
边框：1px实心#000；
}
#外部{边距：0自动；位置：相对；宽度：800px；}
#左{右：50%；宽：400px；}
#左上{位置：相对；宽度：400px；}
#左下{位置：相对；}
#左下{右：50%；宽：200px；}
#左下右{左：50%；宽：200px；}
#右{左：50%；}
#右左{右：50%；宽：200px；}
#右{左：50%；宽：200px；}
左上角
左下角
右下角
近右
极右翼
您仍然可以使用链接到的布局并将其居中，尽管位置：绝对
。我在这里为您调整了它（您必须调整以添加边距，但它可以工作，我测试了它：
<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> 


#外、左、右、左上、左下、，
#左下、左下、右下{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
边框：1px实心#000；
}
#外部{边距：0自动；位置：相对；宽度：800px；}
#左{右：50%；宽：400px；}
#左上{位置：相对；宽度：400px；}
#左下{位置：相对；}
#左下{右：50%；宽：200px；}
#左下右{左：50%；宽：200px；}
#右{左：50%；}
#右左{右：50%；宽：200px；}
#右{左：50%；宽：200px；}
左上角
左下角
右下角
近右
极右翼
为什么，当然是使用表格进行布局！（鸭子和跑步）；-）为什么，当然是使用表格进行布局！（鸭子和跑步）；-）