這裏針對的都是block的元素
div0
div1
div1_1
div1_2
我希望做到的比較奇葩：
主要目的是使div橫排
若div0的寬度夠大，超過div1_1, div1_2的總和，則可以直接使用網上搜到的解決方案：使用float:left
在div1有一個較窄的父元素的情況下，希望div1的寬度可以由子元素撐開，超過父元素的寬度。。
div1中有並列的橫排div1_1, div1_2
如果對div1_1, div1_2使用
float: left;
將會撐不開div1，自動換行，float會失效：
目標：
block元素的默認寬度是上一個指定寬度的父元素的寬度。
若希望能動態的生成一個由內容決定的寬度（這個問題叫shrinking wrap）
有幾種做法 http://haslayout.net/css-tuts/CSS-Shrink-Wrap
比較好的做法是給div1使用css：
white-space:nowrap;/*如果沒有這一條，子元素會自動換行*/
display: table; //or inline-block
div1的子元素使用：
display: inline-block;
vertical-align: top;/*使它看起來和float:left一樣，默認是底部對齊，對於高度不一樣的子div會有影響*/
//如果使用float:left; 將會失效，無法撐寬div1，仍然是兩行
順便推薦一個不錯的在線測試網站：
http://jsfiddle.net/
html:
http://jsfiddle.net/PZT47/1
-----------------------------------
<!DOCTYPE HTML>
<html>
<head>
<style>
div{
border: 2px solid black;
margin: 5px
}
#container{
width : 200px;
height : 200px;
position : relative;
background : yellow;
overflow: visible;
}
#inncontainer{
white-space:nowrap;
display: inline-block;
background: cyan;
width: auto;
height : 190px;
}
#in1{
height:70px;
}
#in2{
height:80px;
}
.inner{
display: inline-block;
width:90px;
position : relative;
background: red;
}
</style>
</head>
<body>
<div id="container">
<div id="inncontainer">
<div id="in1" class="inner">a</div>
<div id="in2" class="inner">b</div>
</div>
</div>
</body>
</html>
參考的比較多，其他的找不到了：
http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents