Question

我有一个水平空白区域出现问题，没有任何理由出现在div中。我的意思是，我无法弄清楚它出现的原因，它没有任何意义。

布局应该是两列：一列右一列，后一张更大。问题是，在正确的div上，我看到定期显示的内容，所有对齐都很好。在左边，它的内容较低，我的意思是它似乎有一个约5px的填充顶部，但根本没有填充。白色空间位于左表格单元格内部，因为即使其中包含纯文本（“Lorem ipsum”），文本显示的内容也低于右侧div内的内容。

HTML代码是：

<div id="main_contents_cage">
    <div id="main_contents_left">
        <table> ... some content ... </table>
    </div>

    <div id="main_contents_right">
        ... some other content ...
    </div>
</div>

CSS是：

#main_contents_cage { display: table; }
#main_contents_left, #main_contents_right { display: table-cell; }

#main_contents_left { width: 742px; }
#main_contents_right { width: 246px; border-left: 1px solid #C6C6C6; }

我搜索了互联网和StackOv，其他人遇到同样的问题而没有找到任何有同样问题的人。类似，但完全不一样！

我尝试给所有元素赋予边框折叠/边框间距（一次一个，然后只是“表格”一个，然后只是“表格单元格”，然后是三个）：什么都没有。

我尝试更改table-cell div的内容，没有任何不同的结果（将表替换为其他div，或只是纯文本....）。

任何人都有任何想法？

Answer 1

我遇到了同样的问题。我也能够通过将“vertical-align：top”分配给table-cell元素来“修复”该问题。这似乎只是Chorme的一个问题。对我来说，它只是正确的列（而不是你的例子中的左侧）

Answer 2

具有“main_contents_left”类的div的内容具有不包含子行或孙子单元格的表标签，可能与它有关吗？

以下是我jsFiddle的链接，如果您有兴趣

Answer 3

好的我想通了：我需要在“table-cell”div中添加“vertical-align：top”，以便内容显示在顶部没有空格！

我知道它可以使用的小提琴，但我真的无法在我的网页上工作，即使没有CSS（只是我需要的那个......）。（FF 13，Chrome 20）。

谢谢

CSS - 显示表和表格单元格上的水平空白区域

3 个答案: