网站首页  注册会员  本站免费电影 留言板  繁體中文

 

您现在的位置: 陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文
 

|
闂傚倸鍊烽悞锕€顪冮崹顕呯唵闁逞屽墰缁辨帡骞撻幒婵堝悑閻庤娲樼划鎾诲箹瑜版帩鏁冮柨婵嗘噹婵℃娊姊绘担鍛婃儓闁哥噥鍋婂畷鎰亹閹烘垶杈堥棅顐㈡处閹风懓鈽夐姀鈩冩珳闂佺硶鍓濋悷銉╁煕瀹€鍕拺闂傚牊绋掗敍鏃堟煙閸戙倖瀚�
|
缂傚倸鍊烽懗鍫曟惞鎼淬劌鐭楅幖娣妼缁€鍌涚箾閹寸們姘跺几鎼淬劍鐓忛煫鍥堥崑鎾崇暦閸モ晝宓侀梻鍌欑閻ゅ洤顩奸妸鈺傚殑闁割偅娲栭崹鍌炴煥閻曞倹瀚�
|
濠电姷鏁搁崑娑㈡偤閵娧呭暗闁稿瞼鍋涚粈鍐煃閸濆嫬鈧悂宕滈鍕拺閻犲洩灏欓崙鍦磼閼碱剛甯涚紒鏃傚枛瀹曞ジ濡烽妷褏宕堕梻浣芥硶閸o箓骞忛敓锟�
|
闂傚倷绀侀幖顐λ囬柆宥呯?闁圭増婢橀崹鍌涖亜閺嶃劌鐒归柡瀣叄閺屾洝绠涙繝鍐ㄦ珰闂佺ǹ顑嗛幐鎼佸煡婢跺﹦鏆﹂柛銉㈡櫆濞堟椽姊虹拠鎻掝劉闁绘棏鍓熼獮蹇涙晸閿燂拷
|
缂傚倸鍊搁崐鎼佸磹閹间礁鐤い鏍仜閸ㄥ倿鏌涢敂璇插箹闁搞劍绻堥弻銈囩矙鐠恒劋绮甸梺绋挎捣閸犳牠寮婚敓鐘茬闁靛ǹ鍎崑鎾广亹閹烘垶杈堥梺璺ㄥ櫐閹凤拷
|
IT闂傚倸鍊风粈渚€骞栭锕€纾归柣鎴f绾偓闂佸憡鍔曞Ο濠傘€掓繝姘叆闁绘洖鍊圭€氾拷
|
闂傚倷绀佸﹢閬嶅储瑜旈幃娲Ω閵夘喗缍庢繝鐢靛У閼归箖寮告笟鈧弻鏇㈠醇濠垫劖笑缂備胶濯崳锝夊蓟瀹ュ牜妾ㄩ梺鍛婃尰閻熲晠銆佸▎鎺旂杸婵炴垶鐟﹀▍銏ゆ⒑鐠恒劌娅愰柟鍑ゆ嫹
|
闂傚倸鍊烽悞锕€顪冮崹顕呯唵闁逞屽墰缁辨帡骞撻幒婵堝悑閻庤娲樼划宀勬偩閻戣棄鐐婇柍鍝勫枦缁辫尙绱撻崒姘偓鎼佹偋韫囨梹鍙忛柣銏⑶归惌妤呮煥閻曞倹瀚�
|
闂傚倷娴囧畷鐢稿窗閹扮増鍋¢柕澶堝剻濞戞ǚ鏀介悗锝冨妷閸嬫捇宕掗悙鏌ュ敹闂佸搫娲ㄩ崑鐐烘倵椤掆偓閳规垿鎮欓崣澶樻!闂佹悶鍔庨崰鏍ь嚕婵犳碍鏅搁柨鐕傛嫹
|
   
专 题 栏 目
 婵犵數濮烽弫鎼佸磻濞戞瑥绶為柛銉墮缁€鍫熺節闂堟稒锛旈柤鏉跨仢闇夐柨婵嗘噺鐠愨剝銇勯埡鍐ㄥ幋闁诡喛顫夐幏鍛村传閵夘垳绀婄紓鍌欑椤︻垶鎮樺┑瀣叀濠㈣埖鍔曠粻濠氭倵濞戞顏嗗閸愬樊娓婚柕鍫濈箳鐎佃偐绱掗鐣屾噧妞ゆ洩缍佸畷鎰版偄閾忚婢戦梻浣告惈濞层劑宕伴幘缁樺仒闁跨噦鎷�
相 关 文 章

快速找出Excel中错误的身
在Foxmail邮件中直接插入
WPS 2009表格中限定用户
解决Word表格粘贴时错位
在Excel表格中鲜为人知的
Word应用技巧:用Alt键调
网页表格中单元格线条及
DW精细化网页中表格的外
DW MX实例:利用表格美化
HTML表格使用从入门到精

 
像表格table一样轻松布局div层           
像表格table一样轻松布局div层
作者:陈鹏 文章来源:eNet 点击数:122 更新时间:2009-9-12 8:44:42
 




 

下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧。

许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。
但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。
其实有个简单的方法,使用display:table, display:table-row and display:table-cell 就可以实现,而且高度小的容器会自适应那些高度相对较高的,但是IE不支持这个属性,我们先不用去责备IE,相信以后会有所改善的。这里我制作了一个模型。

先看看xhtml的结构:

<div class="equal">
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>

很简单不用解释就能看懂,但是这里给出一个table的结构,是不是很相似

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

下来是css:

.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row .three {

}

解释:

1.dispaly:table;让层.equal作为块级元素的表格table显示,也就是将他作为一个表格
2.border-collapse:separate;边框独立,就像表格没有合并单元格以前
3.display:table-row;将.row作为表格行tr显示
4.display:table-cell;将.row的下级div作为表格单元格td显示
5.然后定义宽度

这里还使用了 border-spacing:10px;来区别几个盒子,正如上面所陈述的,IE下不能正常显示,但是在:Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1经过测试均可以完美显示.

文章录入:陈鹏    责任编辑:陈鹏 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
     
     
     
     
     

    Copyright © 2007 - 2009 chenpeng123.com All Rights Reserved
    本站所有文章,软件等均来自网络收集,不代表本站观点,仅供学习和研究使用。如有侵犯您的版权,请联系我们,本站将立即删除。
    鲁ICP备07014697号
    你是本站第 位访客
    51La