你是否覺得用 DIV 做布局有點繁瑣的話，那麼就可以考慮用 CSS3 的 flex 樣式來做布局看看，你會發現很簡單，而且彈性很大，遺憾的是有些比較舊的瀏覽器並不支援

各廠牌瀏覽器版本相容表 :

以 ecshop 的模板為例，要達成如圖的布局只需如下的 CSS

.header-top {
	display: -webkit-flex; display: flex;
	-webkit-align-items: center;align-items: center;
}
.header-top .member {
	-webkit-flex: 1; flex: 1;
	background: yellow;
}
.header-top .service_box {
	width: auto;
	background: green;
}

背景顏色只是用來觀察寬度的，這是使用 FireFox 瀏覽器的結果，IE 只有 11 才支援，我從不用 IE，自然沒有截圖

.main {width: 400px;min-height: 200px;background: yellow;	display:flex;}
		.div1 {	width: 20%;height: 160px;background: #eee;}
		.div2 {	flex: 1;height: 80px;background: pink;}
		.div3 {	width: 50px;height: 120px;background: #f2f2f2;}

.main {width: 400px;min-height: 200px;background: yellow;	display:flex;align-items: center; }
		.div1 {	width: 20%;background: #eee;}
		.div2 {	flex: 1;background: pink;}
		.div3 {	width: 50px;background: #f2f2f2;}

.main {width: 400px;min-height: 200px;background: yellow;	display:flex;align-items:stretch;}
		.div1 {	width: 20%;height: 160px;background: #eee;}
		.div2 {	flex: 1;background: pink;}
		.div3 {	width: 50px;height: auto;background: #f2f2f2;}

.main {width: 400px;min-height: 200px;background: yellow;	display:flex;align-items: flex-end;}
		.div1 {	width: 20%;height: 160px;background: #eee;}
		.div2 {	flex: 1;background: pink;}
		.div3 {	width: 50px;height: auto;background: #f2f2f2;}

flex 的屬性很多，可以輕易組合出你想要的布局，底下列出 flex 的屬性及值 :

flex-direction : 想要子元素如何排列
    row：預設值，由左到右，從上到下
    row-reverse：與 row 相反
    column：從上到下，再由左到右
    column-reverse：與 column 相反

justify-content : 子元素的水平對齊與均分
    flex-start：預設值，靠左對齊
    flex-end：靠右對齊
    center：水平置中
    space-between：均分子元素間隔
    space-around：均分子元素間隔(含子元素兩側)

align-items : 子元素的垂直對齊與均分(單行)
    flex-start：預設值，靠上對齊
    flex-end：靠下對齊
    center：垂直置中
    stretch：將未指定高度的子元素全部撐開
    baseline：以所有子元素的基線作為對齊標準

align-content : 子元素的垂直對齊與均分(多行)
    flex-start：預設值，靠上對齊
    flex-end：靠下對齊
    center：垂直置中
    space-between：將第一行與最後一行分別對齊最上方與最下方
    space-around：每行平均分配間距
    stretch：子元素全部撐開

 flex-wrap : 子元素是否換行
    nowrap：預設值，單行
    wrap：多行
    wrap-reverse：多行，但子元素行反轉

order : 可以直接指定子元素的排列順序

flex : 可以直接指定比例值來讓未知高度或寬度的子元素自動分配