4列弹性css与左上框横跨2列。怎么样？ [英] 4 columns elastic css with top-left box spanning 2 columns. How?
本文介绍了4列弹性css与左上框横跨2列。怎么样？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图做一个弹性（基于em）CSS布局有四列和一个框，跨越两个列在左上角。四个列具有相同的宽度（例如20em，具有1em的边距），左上角的框具有可变高度。
I'm trying to make an elastic (em-based) CSS layout with four columns and a box that spans two columns in the top left corner. The four columns have the same width (say 20em, with 1em of margin) and the top-left box has variable height.
没有必要有四列相同的高度。
There is no need to have the four columns of the same height.
我想远离CSS框架和基于-gasp-table的布局。
I want to stay away from CSS frameworks and -gasp- table based layouts.
我想要一个HTML结构这：
I am thinking of an HTML structure like this:
<box></box>
<column1></column1>
<column2></column2>
<column3></column3>
<column4></column4>
推荐答案
<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列。怎么样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
