CSS布局技巧 -- 純CSS讓子元素的寬度總和決定其父元素的寬度

使用場景

在移動端屏幕寬度有限的前提下，使用橫向滾動的方式展示更多的內容。在這樣的需求下，希望父元素作為容器，其寬度可以又橫向排列資源的總寬度動態撐開，超過祖父元素的寬度；在不超過祖父元素時，自動繼承100%的寬度。

DOM結構如下：

	<div class="grantparent">
		<div class="parent">
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
		</div>
	</div>

一般處理方法

• 將子元素設為float或者inline-block，然后再通過js計算子元素的個數和其寬度，從而設置父元素的寬度
• 不利因素
  • 增加DOM操作
  • js重新設定屬性增加渲染重繪次數
  • float在渲染時計算量比較大

純CSS處理方法

• 設置父元素的屬性

  white-space: nowrap;
  display: inline-block;
  

• 設置子元素的屬性

  display: inline-block;