行內元素對齊：display:inline-block;

行內元素對齊：display:inline-block;

今天見到一個一行元素水平排列，可是對不齊啊，如圖：

代碼：

        div{
		border: 1px solid red;
	}
	.wrap > div{
		display: inline-block;
		width: 200px;
		height: 200px;
		background: green;
	}

        <div class="wrap">
		<div class="one1">這是內容1</div>
		<div class="one2"></div>
		<div class="one3">這是內容2</div>
		<div class="one4">合適內容3</div>
	</div>

　　問題緣由：由於行內元素的排列都是按照一條水平基線進行排版的，因此能夠使用vertical-align解決：

這樣就能解決不少問題了，排版也很好。可是一想這個跟文本有無內容有關係：若是不加vertical-align，父級div高一點就會這樣：

這樣會不會跟overflow有關呢？畢竟文本內容都會跟這個有點關係，我加入：

對齊了，並且和vartical-align:bottom效果同樣。

緣由：