布局，CSS表格，表格单元格和旁边列上的丑陋空白

我在创建基本Dreamweaver HTML5 3列固定布局上的相等高度列时遇到了问题。我正在使用jQuery等高列来使列的bg颜色在所有页面上都相等，但是由于我在我的网站上使用了一些脚本，并且不兼容手动“style：height：xpx”添加到文章列中，我希望尝试使用display：表格，display:table-cell方法。我已经使用了基本的Dreamweaver 5.5 HTML5模板，并保留了所有内容，除了删除display:block属性以外，文章等元素。我在3列中添加了一个容器div;放在一边，放在文章旁边。布局，CSS表格，表格单元格和旁边列上的丑陋空白

一切工作正常 - 因为在背景颜色继续，直到块的结束，这是我需要的 - 除了麻烦是，由于某些原因在旁边的列它留下了一个空白的顶部的列13像素。我不知道为什么会发生这种情况。

我已经在这里上传文件：http://www.primecuts.org.uk/test.html。如果我删除了<nav>部分，差距仍然存在，虽然它看起来不“丑陋”，因为bgcolor差异不明显，但我希望在文本起始位置和块顶部/标题底部。任何帮助将不胜感激，我不知道是什么造成这一点。

来源

2012-01-06 patrickzdb

我已经注意到，如果我删除了.sidebar1，.content的CSS中的所有填充，并且一方面缩小了间隔，但仍然存在3px的空白。 – patrickzdb 2012-01-06 10:55:26

为了长寿（以及如果你开始搞活动网站），这里是jsfiddle的代码：http://jsfiddle.net/fZR2H/1/ – 2012-01-06 11:10:33

我很困惑。希望你得到一个解决方案。 '.sidebar1 {float：left; }'删除它，但当然会破坏布局。 – 2012-01-06 11:24:02

问题可以通过

.sidebar1 { vertical-align:top; }

被固定的间隙是与上。内容物品的填充，在这个意义上，除去填充去除间隙，并且填充被影响的位置因为它们在同一个表格行中都是表格单元格，但我承认这是一个粗略的解释，我实际上无法确定与此相关的特定CSS要求。

来源

2012-01-06 13:29:36 Alohci

啊难以捉摸的'垂直对齐'...很好的捕获。我猜这是表格单元格显示的一个症状？ – 2012-01-06 16:02:54

优秀！非常感谢。最后是一个实际可行的3 col布局，我所见过的“圣杯”方法非常复杂，并且不允许您在列中使用背景图像。再次感谢。 – patrickzdb 2012-01-07 20:40:57

布局，CSS表格，表格单元格和旁边列上的丑陋空白

回答

相关问题