要求三個面板（有指定寬度）並排，面板中有內容，內容的寬由標題確定，並且置中對齊，內容的其他段落與標題靠左對齊。
<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; }
</p><p><!DOCTYPE html><br /><html><br /> <head><br /> <title>CSS Demo by 司徒正美</title><br /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"></p><p> <style><br /> .float_left{<br /> float:left;<br /> width:350px;<br /> height:200px;<br /> border:1px solid #cdcdcd;<br /> }<br /> .float_left span{<br /> display:inline-block;<br /> }<br /> .float_left h2{<br /> margin:0;<br /> color:white;<br /> text-align: left;<br /> height:200px;<br /> background: orange;<br /> }<br /> .float_left h2 p{<br /> font-size: 12px;<br /> color:white;<br /> }<br /> </style></p><p> </head><br /> <body></p><p> <div><br /> <center class="float_left"><br /> <span><br /> <h2>這個比較短<br /> <P>2013</p><br /> <p>2013</p><br /> <p>2013</p><br /> </h2><br /> </span><br /> </center><br /> <center class="float_left"><br /> <span><br /> <h2>讓父元素的寬度由子項目決定<br /> <P>2013</p><br /> <p>2013</p><br /> <p>2013</p><br /> </h2><br /> </span><br /> </center><br /> <center class="float_left"><br /> <span><br /> <h2>這個的長度也不一樣<br /> <P>2013</p><br /> <p>2013</p><br /> <p>2013</p><br /> </h2><br /> </span><br /> </center></p><p> </div></p><p></body><br /></html><br />
運行代碼
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>
</p><p><!DOCTYPE html><br /><html><br /> <head><br /> <title>CSS Demo by 司徒正美</title><br /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"></p><p> <style><br /> td{text-align:center; width:360px; background-color:lightblue; border:1px solid blue;}<br />h3{background-color:pink;}<br />ul{background-color:#DDD;}</p><p>.mod{ display:inline-block; text-align:left; min-width:9em;}</p><p> </style></p><p> </head><br /> <body></p><p> <table><br /> <tbody></tbody><br /> <tr><br /> <td><br /> <div class="mod"><br /> <h3 class="hd">標題標題</h3><br /> <ul class="bd"><br /> <li>列表列表列表1</li><br /> <li>列表列表列表2</li><br /> <li>列表列表列表3</li><br /> </ul><br /> </div><br /> </td></p><p> <td><br /> <div class="mod"><br /> <h3 class="hd">標題標題22222222</h3><br /> <ul class="bd"><br /> <li>列表列表列表1</li><br /> <li>列表列表列表2</li><br /> <li>列表列表列表3</li><br /> </ul><br /> </div><br /> </td></p><p> <td><br /> <div class="mod"><br /> <h3 class="hd">標題標題3333</h3><br /> <ul class="bd"><br /> <li>列表列表列表列表列表列表表列表列表1</li><br /> <li>列表列表列表2</li><br /> <li>列表列表列表3</li><br /> </ul><br /> </div><br /> </td><br /> </tr><br /> </table><br /></body><br /></html><br />
運行代碼
總結一下上面的問題(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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
