基本彩車例如:http://jsfiddle.net/UKKcq/11 基本顯示:inline-block的例子:http://jsfiddle.net/UKKcq/19/
有考慮在這裏公平的幾件事情:
首先,你會在第二個例子中注意到,從文本主要部分從所有3個div開始。這是因爲它們仍然是文檔流程的一部分,而當使用浮動文本時,文本並不是如此。
另外,在第二個例子中,我必須刪除div之間的所有間距/換行符,以阻止出現在它們之間的空間。這一切發生與內嵌塊上的時間,我用下面的jQuery的功能來修復它,以免毀了我的標記的整潔:
jQuery.fn.cleanWhitespace = function() {
textNodes = this.contents().filter(
function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
.remove();
return this;
}
})();
$('INSERTPARENTDIVHERE').cleanWhitespace();
此外,我不得不用vertical-align:top
因爲默認情況下最短div
(以這個案例的中心),與其他兩個divs
的底部對齊。
最後一個考慮因素是inline-block
這樣的佈局在用戶使用瀏覽器進行放大或者因爲任何原因而導致寬度,填充,邊框或邊距發生變化時都會出現折斷的趨勢。您可以對後面的因素有相對的控制權,但爲了確保在用戶放大時不會下降到下一行(這看起來確實很糟糕),我建議將white-space: nowrap;
應用於父div
以嘗試並防止出現這種情況。
請只使用'code formatting' ...代碼。 – Doorknob 2013-03-20 12:50:42
您是否嘗試過使用Twitter Bootstrap?在你面對它們之前,它解決了很多佈局問題! – 2013-03-20 12:51:09
@StijnHaus:其實這個網站已經建成了。所以我試圖使用媒體查詢來改變佈局 – user1889007 2013-03-20 12:52:12