实现横向一列固定，其余两列百分比按百分比变化。

 　　在开发中，Designer提出了一个需求，如图。标题与左侧间距40px，并且标题部分占据剩余宽度的40%，内容部分占据剩余宽度的60%，并且内容和标题再过长时自动换行。想了一下，利用定位和display:table，来实现。

 1     <div style="border: 1px solid red; position: relative;">
 2         <!-- width:auto -->
 3         <div style="margin-left: 40px; background: #b6ff00;">
 4             <!-- 需要设置width：100% -->
 5             <div style="display: table; width: 100%;">
 6                 <!-- height设置auto，文字过长时自动变高。 -->
 7                 <div style="width: 40%; background: #808080;display: table-cell; vertical-align: middle">
 8                     This is Title:
 9                 </div>
10                 <div style="width: 60%; background: #ff6a00; display: table-cell; vertical-align: middle">
11                     This is content area,today is fine.
12                 </div>
13             </div>
14         </div>
15     </div>

 

 

posted on 2014-06-03 17:03  卡卡布  阅读(144)  评论(0)    收藏  举报

导航