使用CSS布置地图

Question

我有以下地图：

我创建了需要填充此地图的矩阵（这些都是表格）

我的问题是，我应该如何安排这些矩阵，使它看起来像地图？

我不想注意绝对定位，因为我可能会改变我创建的矩阵中行的宽度和高度。有没有人有一个灵活的解决方案＆＃34;足以处理类似于我所描述的变化？

Answer 1

HTML结构

我认为你应该组织成两个独立的结构，然后组织每个单独的表。

结构1： 一个单独的div，里面有一张桌子。

结构2 第二个div，页面的宽度，包含五个内联div（作为列）。在每个div中，按照你想要的顺序组织每个矩阵（按每列div宽一行x行组织）

代码

<div id="top"> 
    <table id="table_top">With rows/columns declared</table>
</div>

<div id="bottom">
    <div class="house"><table id="house1_table1></table>, etc</div>
    <div class="house"></div>
    <div class="house"></div>
    <div class="house"></div>
    <div class="house"></div>

CSS CSS CSS

#top {
  width: desired width;
  margin 0 auto; //to center block
}

#table_top {
  width: 100%; \\flexible width so you can grow each row without worrying about messing up structure. 
  height: desired height; \\not 100% to maintain structure more easily. 
 }

\ add css以设置具有所需宽度的上部行和列的样式。

#bottom {
   width: 100%; 
   margin: 0 auto; 
   height: desired height; 
}

.house {
   width: 20%; \\gives each row the same width. 
   height: same as desired height for #bottom \\Make sure this heigh will accommodate all five columns in house1 row
   float: left; 
   display: inline; 


.house table {
   width: 90%; \\gives padding for aesthetic purposes without too much work. 
   margin: 0 auto; \\to center.
   height: number of tables/desired height - whatever padding is for aesthetics; 
   padding: 20px; 

这里主要关注的是使用一个灵活的模型（即div中div内的表格），它允许你改变某些内部元素（即房子3，第3列中的一行的高度），而不必担心整体结构。