多个图层框等高代码特效-JS特效-爱易网页

多个图层框等高代码特效

日期：2014-05-18　浏览次数：20275 次

以下是程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

body { font: 12px/1.6em 宋体 sans-serif; }

.box { margin: 0 auto; width: 950px; overflow: hidden; }

.left {  float: left; width: 300px; overflow: hidden; }

.center {  float: left; width: 300px; margin-left: 10px;  overflow: hidden; }

.right {  float: right; width: 330px; overflow: hidden; }

.equal {padding-bottom: 9999px; margin-bottom: -9999px;}

.tap { border: solid 1px #F00;  margin-top: 10px; }

.border_top { height: 1px; background: #F00; overflow: hidden; }

</style>

</head>

<body>
<div class="box">
  <div class="left equal">
    <div class="tap">fdsfs</div>
 <div class="tap">fdsfs</div>

<div class="equal tap">fdsfs<br />dsasdfdsfs<br />dsasd<br />dsasd<br />dsasd</div>
  </div>

<div class="center equal">
    <div class="tap">fsddf</div>
 <div class="equal tap">fsddf</div>
  </div>

<div class="right equal">
    <div class="equal tap">其实现的原理为，正内边距占位，负外边距保持其大小，再由父元素溢出隐藏来实现，而当多模块时，只需在每列最后加上正负补丁，就可以实现</div>
  </div>
</div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

多个图层框等高代码特效

相关资料更多>

推荐阅读更多>