应用CSS的table

日期:2021-01-20 类型:科技新闻 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

对要素开展横向排序的情况下,1般都会应用float, display:inline-block等方式。大家应用table-cell还可以简易的完成,
运用table-cell来制做横向排序的益处我感觉有3点(呵呵呵,一些苍白无力)

1.float和 clear:both都可以以省略了;
2.纵向垂直居中还可以了;
3.即使应用border和padding也不容易顶出边框了。
clear:both可使用display:inline-block更换,display:table-cell最关键的是纵向垂直居中。
也有便是在回应式设计方案的情况下,padding和border不容易致使款式顶出边框的难题。不再必须测算宽度和应用box-sizing了。

table-cell制做的横向排序
最先详细介绍1下table-cell的基础写法

例,大家制做1个,1般网站中都会出現的左图右文的款式

CSS一部分:

CSS Code拷贝內容到剪贴板
  1. .box{width:60%; margin:60px auto 0; padding:20pxbackground:#f5f5f5;}   
  2. .content{display:table-cell; *display:inline-block;}  

               
HTML一部分:

XML/HTML Code拷贝內容到剪贴板
  1. <div class="box f9 fix">  
  2.     <a href="#prettyGirl" class="l mr10"><img border="0" src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /></a>  
  3.     <div class="content">  
  4.         <p><a href="#prettyGirl">大漂亮美女1枚</a> 来自上海市</p>  
  5.         <p class="mt5">签字:想找个保鲜盒把你给我的那些打动都装起来。当你让我伤心的情况下就拿出往返味1下。</p>  
  6.         <p class="mt5">新浪微博:坐在办公室,只听轰隆隆隆几声巨响,晴天也能打雷吗?原先街对面的芭莎咖啡厅被炸变成两截。这定点工程爆破也太不成功了,也不清结局,把途经的轿车震得蓬头垢面,愣在路中间不知道怎样是好。其次,房屋只炸了1半,另外一半矗立不倒,是乍药太水還是房屋品质太好?</p>  
  7.     </div>  
  8. </div>