Question

我需要使用带有CSS的HTML执行以下操作：

我需要将一些HTML放在一个大盒子里。

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

大盒子周围应该有一个边框，并且应该有一个边框分隔Box I和Box II。

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

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

换句话说，我有一个带有四个分区的大盒子;如何绘制网格以对其进行分区？

到目前为止，我尝试过为每个盒子使用HTML div。我看到CSS border属性给每个框一个边框。然而，盒子仍然彼此分开，导致混乱的边界。

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

我该如何解决这个问题？

Answer 1

你做得很好，但是：

同时给出boxI和boxII float:left

下一个在boxII上的下降边框，因为它将它移动到下一行，因为：

boxI（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/

Answer 2

有一些解决方案：

仅为各个方框提供所需的边框（例如boxIA和boxIB只需底边框）;
使用负边距将框向上拉到左侧，使它们稍微重叠（1px）;
使用像display: table-cell这样的css设置让这些框表现得像一张桌子（还没试过那个带边框的那个......）。这导致（较旧的......）浏览器兼容性问题。

就个人而言，我只会使用选项1，因为所有盒子都有一个id，但我猜选项3是最具可扩展性的。

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

2 个答案: