佈局，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表格，表格單元格和旁邊列上的醜陋空白

回答

相關問題