我想以某種方式對齊某些div。爲了幫助調試正在發生的事情，我決定向divs添加邊界以研究它們如何定位。但邊界看起來很奇怪。這裏的HTML：奇怪的DIV邊框顯示

enter image description here

這裏的CSS：

enter image description here

而這裏的結果：

enter image description here

我在做什麼錯？謝謝！

來源

2012-05-07 septerr

定義：「奇怪」。並定義：「最優」 –

它看起來像div有一個寬度（可能是100px），但沒有高度。只需在這個頁面上的JavaScript控制檯*中輸入*並查看標題：'$（「h1」）。height（0）.css（「border」，「.2em dotted＃900」）;' –

將HTML和CSS粘貼爲文本而不是文本圖片？另外，發佈一個[實時演示]（http://jsfiddle.net/），展示代碼的行動。 –

這並不好笑（!!）。該div似乎有0高度，因此頂部和底部的邊界相互接觸，形成一個有趣的（??）外觀。

該div似乎包含內容，但內容可能是浮動或絕對定位的，因此它不會縱向拉伸有趣（！？）div。

demo here

來源

2012-05-07 14:51:47

高度是問題所在。設置高度解決了問題。感謝所有的幫助！並且，爲發佈圖片而不是文字道歉。而且我知道我可以用jsfiddle來發布問題。再次感謝！ – septerr

你有一個很好的資源，瞭解divs的建議。他們似乎在浮動，絕對/相對定位等方面不直觀。謝謝！ – septerr

CSS規則對HTML的行爲在[W3C網站]（http://www.w3.org/TR/CSS2/visuren.html）上有詳細描述;不幸的是，它很難消化。我會建議在Google上搜索CSS定位和佈局教程。 http://www.alistapart.com和http://www.cssjuice.com是我個人的最愛。避免www.w3schools.com。 –

高度爲做到這一點的一種方式，但它有點hackey，另一種是浮動是周圍的其他液浮的div股利：

http://jsfiddle.net/Ewd4x/2/

來源

2012-05-07 15:28:39 Lowkase

謝謝！我真的需要了解divs是如何工作的。對我而言，浮動影響邊界的原因並不直觀。 – septerr

奇怪的DIV邊框顯示

回答

demo here

相關問題