如何在不规则排列的网页元素周围绘制网格？

我需要在一个大框中附上一些HTML。

在大箱子里，我需要两个较小的箱子，箱子一和箱子二。盒子I和盒子II应该与大盒子具有相同的高度。盒子应该是大盒子宽度的75％，盒子II应该是大盒子宽度的25％。

大盒子应该有一个边框，并且应该有一个边框分开盒子I和盒子II。

到目前为止，我所描述的基本上是一个有两个分区的大矩形。

接下来，在框I中，应该有三个框，框IA，框IB和框IC。这三个盒子应该占据盒子I的整个宽度，并且每个盒子应该是盒子I的高度的33％。应该有一个边框将这三个盒子分开。

换句话说，我有一个有四个分区的大盒子;我如何绘制一个网格来分割它们？

我到目前为止所尝试的是为每个盒子使用HTML div。我看到CSS边框属性给每个框边框。然而，这些箱子仍然相互分离，导致了混乱的边界。

<head> 
<style type='text/css'> 
    .contentbox { 
     border-color: black; 
     border-style: solid; 
     border-width:thin; 
    } 
</style> 
</head> 
<body> 
<div id='bigBox'> 
    <div id='boxI' style='width:75%'> 
     <div id='boxIA' class='contentbox' style='height:33%'></div> 
     <div id='boxIB' class='contentbox' style='height:33%'></div> 
     <div id='boxIC' class='contentbox' style='height:33%'></div> 
    </div> 
    <div id='boxII' class='contentbox' style='width:25%'> 
    </div>    
</div> 
</body>

它应该是这样的：

+-----------------------------------+-------------------+ 
|         |     | 
|  box IA      |     | 
|         |     | 
|         |     | 
+-----------------------------------+  box II  | 
|         |     | 
|  box IB      |     | 
|         |     | 
|         |     | 
+-----------------------------------+     | 
|         |     | 
|         |     | 
|  box IC      |     | 
|         |     | 
+-----------------------------------+-------------------+

我怎样才能解决这个问题？

来源

2011-03-24 Daniel Allen Langdon

你应该绘制你想要的图 – LostLin 2011-03-24 14:15:45

你的例子并不能很好地说明问题。尝试在jsfiddle.net上发布它，然后将URL放入您的问题中。 – 2011-03-24 14:16:47

你做得很好，但：

给出boxII都博西和boxII float:left

下一个下降的边界，因为它移动到下一行，因为：

博西（75％）+ boxII（ 25％）+ boxII-border-left（1px）+ boxII-border-right（1px）大于父盒子的100％

使用背景颜色进行调试。

所以对于边界：

boxII给它border-left: 1px...，并margin-left: -1px

boxIA应该无边框

boxIB和boxIC应该有border-top: 1px...和margin-top: -1px

在FF测试， Chrome，IE7和IE8

这里是完整的解决方案： http://jsfiddle.net/JawC6/3/

来源

2011-03-24 14:28:17

我看着你在jsfiddle.net上发布的例子。它很近。但是，我发现Box I和Box II之间存在1 px边框。 Box IA，Box IB和Box IC之间有1 px边界。我猜你有两个1px边框并排。 – 2011-03-24 14:33:48

抱歉，忘记了照片边框XD我更新了答案。 – 2011-03-24 14:44:58

有一些方案来解决这个：

只给个别盒，他们需要（例如boxIA和boxIB只需要一个底部边框）的边界;
使用负边距向上拉框并向左移动，使其略微重叠（1px）;
使用像display: table-cell这样的css设置让这些盒子像一张桌子一样行事（没有尝试过那个，但是有边框......）。这导致（较老的...）浏览器兼容性问题。

就个人而言，我只是使用选项1，因为所有的箱子都有ID，但我猜想选项3是最具扩展性的。

来源

2011-03-24 14:18:27 jeroen

如何在不规则排列的网页元素周围绘制网格？

回答

相关问题