css - 布局、CSS 表格、表格单元格和旁边列上的丑陋间隙

标签 css html css-tables

我在基本 Dreamweaver HTML5 3 列固定布局上创建等高列时遇到问题。我正在使用 jQuery 等高列来使列的 bg 颜色在所有页面上都相等,但是由于我在我的网站上使用的一些脚本以及与添加到文章列的手动“style:height:xpx”不兼容我想要尝试使用显示:表格,display:table-cell方法。我使用了基本的 Dreamweaver 5.5 HTML5 模板,除了删除了 display:block 之外,一切都保持不变。 aside、article 等元素的属性。我在 3 列周围添加了一个容器 div;一边,文章和一边。

一切正常 - 因为背景颜色一直持续到 block 的末尾,这正是我所需要的 - 除了问题是,由于某种原因,它在旁边的列上留下了 13px 的列顶部的间隙.我不知道为什么会这样。

我已将文件上传到此处:http://www.primecuts.org.uk/test.html .如果我删除 <nav>部分,差距仍然存在,虽然它看起来不像 bgcolor 差异不明显那样“丑陋”,但我希望文本开始和 block 顶部/标题底部之间没有间隙。任何帮助将不胜感激,我不知道是什么原因造成的。

最佳答案

问题可以解决

.sidebar1 { vertical-align:top; }

间隙与 .content 文章上的填充有关,从某种意义上说,移除填充会移除间隙,并且填充会影响侧边栏的位置,因为它们都是同一表格行中的表格单元格,但是我承认这是一个有点模糊的解释,我实际上无法确定与此相关的特定 CSS 要求。

关于css - 布局、CSS 表格、表格单元格和旁边列上的丑陋间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8756339/

相关文章:

php - 谷歌图表和 MYSQL

html - CSS 背景图像不起作用

html - 为什么表格单元格间距不起作用?

html - 显示 : table-cell; in ie6/7 workaround

html - CSS Input(按钮)边框特异性

html - CSS float : Floating an image to the left of the text

javascript - 单击“保存”按钮后如何重定向到同一选项卡

html - 如何将图像放入 100% 高度的表格中?

html - HTML 表格中的固定标题

css - flexbox 使内容消失