7

这是我正在为布局进行的实验。我在定位 div 来实现这个效果时遇到了很多问题，所以我转向了旧的备用表级联。我的问题是，最后一个上框在所有 3 个浏览器中都有额外的填充，无论我尝试什么，我似乎都无法将 CSS 或 HTML 去掉。红色框应与您看到的围绕它们的绿色位齐平，并且红色框之间的蓝色行右侧不应有 1px 可见的绿线。任何见解将不胜感激。

<!doctype html>
<html>
<head>
<style>
 table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}

td table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}

img { display: block; }
</style>
</head>
<body style="background-color: black;">
<table style="background-color: white; height: 525px; width: 3200; padding-top: 25px;  padding-bottom: 25px;">
<tr>
 <td colspan="1" style="width: 350px;">
   <table class="container" style="height: 475px; width: 350px; margin-left: 25px; margin-right: 25px;">
    <tr>
  <td style="background-color: green; height: 225px; width: 350px;" colspan="3">

  </td>
</tr>
<tr>
  <td style="background-color: blue; height: 25px; width: 350px;" colspan="3">

  </td>
</tr>
<tr>
  <td style="background-color: green; height: 200px; width: 175px;">

  </td>
  <td style="background-color: blue; height: 200px; width: 25px;">

  </td>
  <td style="background-color: green; height: 200px; width: 125px;">

  </td>
</tr>
</table>
</td>

<td colspan="1" style="width: 125px;">
<table class="container" style="height: 475px; width: 125px; margin-right: 25px;">
<tr>
  <td style="background-color: red; height: 475px; width: 125px;">

  </td>
</tr>
</table>
</td>

<td colspan="1">
<table class="container" style="height: 475px; width: 450px; margin-right: 25px;">
<tr>
  <td style="background-color: green; height: 25px; width: 225px;">

  </td>
  <td style="background-color: blue; height: 225px; width: 25px;" >

  </td>
  <td style="background-color: green; height: 225px; width: 225px;" >

  </td>
</tr>
<tr>
  <td style="background-color: blue; height: 25px; width: 450px;" colspan="3">

  </td>
</tr>
<tr>
  <td style="background-color: green; height: 200px; width: 450px;" colspan="3">

  </td>
</tr>
</table>
</td>

<td colspan="1">
<table class="container" style="height: 475px; width: 400px; margin-right: 25px;">
<tr style="height: 225px;">
  <td style="background-color: green; height: 225px; width: 275px;">

   <table style="width: 100%; height: 225px;">

    <tr>
         <td style="height: 100px; width: 225px; background-color: red;">

         </td>      
        </tr>

        <tr>
         <td style="background-color: blue; height: 25px; width: 225px;">

         </td>
        </tr>      

        <tr>
         <td style="height: 100px; width: 225px; background-color: red;">

         </td>      
        </tr>

       </table>       

  </td>
  <td style="background-color: blue; height: 225px; width: 25px;" >

  </td>
  <td style="background-color: green; height: 225px; width: 100px;" >

  </td>
</tr>
<tr>
  <td style="background-color: blue; height: 25px; width: 400px;" colspan="3">

  </td>
</tr>
<tr>
  <td style="background-color: green; height: 200px; width: 400px;" colspan="3">

  </td>
</tr>
</table>
</td>

</table>
</td>

</table>

</body>
</html>
4

1 回答 1

4

你是这个意思吗？

http://jsfiddle.net/Nq8Us/1/

我已经编辑了您的代码，并通过删除内联样式删除了有问题的红色下方绿色的额外“填充”，然后在 css 中添加了一些指向#problem_cell_table.

我建议您删除所有内联样式并将它们转移到样式表。内联样式覆盖所有样式表代码。这很糟糕，也解释了为什么样式表更改没有任何效果。

至于为什么有填充，这是因为您的主表的高度包含所有行、单元格和内表，高于声明的行高加在一起。您所有行中的单元格会自动调整其大小以补偿不等于您声明的总和的像素525px。

在我所做的示例中，我通过将内表的 css 设置为“作弊”，height: 100%以便在发生计算错误时扩展以适应高度。

给我一点时间，我将<div>在我的答案中添加更多样式方法。

编辑：

好的，我尝试使用<div>和 CSS 进行布局。http://jsfiddle.net/XbFcJ/

请记住首先使用 CSS 重置样式表！

CSS： 

<style>
body{
    background: black;
}

.wrapper{
}

.container{
    width: 1500px;
}

.content-table {
    border: 25px solid #fff;
    overflow: hidden;
    background: #fff;
}

.content-column {
    margin-right: 25px;
    float: left;
    height: 475px;
}

.content-column.last {
    margin-right: 0;
}

.first, .third, .last {
    width: 425px;
    background-color: green;
    margin-right: 25px;
}

.top{
    height: 225px;
    border-bottom: 25px solid blue;
}

.left {
    height: 225px;
    width: 200px;
    border-right: 25px solid blue;
}

.content-column.second {
    width: 100px;
    background-color: red;
}

.last .left {
    background-color: red;
}

.last .left .top {
    height: 100px;
    border-bottom: 25px solid blue;
}​
</style>

的HTML：

<body>
<div class="wrapper">
    <div class="container">
        <div class="content-table">
            <div class="content-column first">
                <div class="top">
                </div>
                <div class="bottom">
                    <div class="left">
                    </div>
                </div>
            </div>
            <div class="content-column second">
            </div>
            <div class="content-column third">
                <div class="top">
                    <div class="left">
                    </div>
                </div>
                <div class="bottom">
                </div>
            </div>
            <div class="content-column last">
                <div class="top">
                    <div class="left">
                        <div class="top">
                        </div>
                    </div>
                </div>
                <div class="bottom">
                </div>
            </div>
        </div>
    </div>
</div>
</body>​
于 2012-10-16T15:03:43.640 回答