要求三個面板（有指定寬度）並排，面板中有內容，內容的寬由標題確定，並且居中對齊，內容的其他段落與標題左對齊。
<div>
<center class="float_left">
<span>
<h2>這個比較短
<P>2013</p>
<p>2013</p>
<p>2013</p>
</h2>
</span>
</center>
<center class="float_left">
<span>
<h2>讓父元素的寬度由子元素決定
<P>2013</p>
<p>2013</p>
<p>2013</p>
</h2>
</span>
</center>
<center class="float_left">
<span>
<h2>這個的長度也不一樣
<P>2013</p>
<p>2013</p>
<p>2013</p>
</h2>
</span>
</center>
</div>
.float_left{
float:left;
width:350px;
height:200px;
border:1px solid #cdcdcd;
}
.float_left span{
display:inline-block;
}
.float_left h2{
margin:0;
color:white;
text-align: left;
height:200px;
background: orange;
}
.float_left h2 p{
font-size: 12px;
color:white;
}
data:text/html,<style> article { display: -webkit-flex; background: rgba(255, 0, 0, 0.2) } div { width: 33.33%; border-right: green solid; } section { background: rgba(0, 0, 255, 0.2); margin: auto; width: -webkit-max-content; } </style><article><div><section><h1>Who We Are</h1><ol><li><li>ttttttttttttttttttttt<li></ol></section></div><div><section><h1>How We Operate</h1><ol><li><li><li></ol></section></div><div><section><h1>Support</h1><ol><li><li><li></ol></section></div></article>
data:text/html,<style> article { display: -webkit-flex; background: rgba(255, 0, 0, 0.2) } div { width: 33.33%; border-right: green solid; } section { background: rgba(0, 0, 255, 0.2); margin: auto; display: table } </style><article><div><section><h1>Who We Are</h1><ol><li><li>rrrrrrrrrrrr<li></ol></section></div><div><section><h1>How We Operate</h1><ol><li><li><li></ol></section></div><div><section><h1>Support</h1><ol><li><li><li></ol></section></div></article>
總結一下上面的問題(by 一絲)：
「標題相對容器居中，內容始終與標題左側對齊」效果的實現
1.table 方式： http://jsfiddle.net/Tz23W/1/
2.inline-block 方式： http://jsfiddle.net/dCxHW/2/
3.width:max-content 方式
由此問題引出 CSS3 Sizing Module 中的 min-content，max-content，fit-content 等值的用法與 CSS2.1 的關系（CSS 2.1中不能顯性指定這些屬性值，只能通過計算的方式得到）。 http://dev.w3.org/csswg/css3-sizing/#width-height-keywords