今天寫一個很簡單的“品”字佈局，發現了一個坑：

HTML
	<div class="up"></div>
    	<div class="left"></div>
    	<div class="right"></div>

CSS
	.up {
            width: 100%;
            background-color: whitesmoke;
            height: 100px;
        }
        .left {
            width: 50%;
            height: 100px;
            background-color: whitesmoke;
            display: inline-block;
        }
        .right {
            width: 50%;
            height: 100px;
            display: inline-block;
            background-color: gainsboro;
        }
 

這樣子，頁面上的left和right兩個div是不會並排顯示的，原因是

在編輯器裡格式化程式碼兩個div之間存在回車換行符，這個換行符被解析到HTML裡了。

解決的方法是

1. 把換行去掉，讓兩個div連著打。
2. 在父元素設定font-size：0,這個方法有副作用，子元素需要宣告font-size。