zoukankan      html  css  js  c++  java
  • 等高DIV

    1、利用边距(margin)和补白(padding)实现div等高

    <style type="text/css">
    body,div,p
    {margin:0;padding:0;}
    #wrap
    {overflow:hidden;width:1000px;margin:0 auto;}
    #left,#center,#right
    {margin-bottom:-10000px;padding-bottom:10000px;}
    #left
    {float:left;width:250px;background:#00FFFF;}
    #center
    {float:left;width:500px;background:#FF0000;}
    #right
    {float:right;width:250px;background:#00FF00;}
    </style>
    <div id="wrap">
    <div id="left">
    <p>left</p>
    <p>left</p>
    </div>
    <div id="center">
    <p>center</p>
    </div>
    <div id="right">
    <p>right</p>
    <p>right</p>
    <p>right</p>
    </div>
    </div>

    2、js方法实现等高、

    <style type="text/css">
    body,div,p
    {margin:0;padding:0;}
    #wrap
    {overflow:hidden;width:1000px;margin:0 auto;}
    #left
    {float:left;width:500px;background:#00FFFF;}
    #right
    {float:right;width:500px;background:#00FF00;}
    </style>
    <div id="wrap">
    <div id="left">
    <p>left</p>
    <p>left</p>
    </div>
    <div id="right">
    <p>right</p>
    <p>right</p>
    <p>right</p>
    </div>
    </div>
    <script type="text/javascript">
    document.getElementById(
    'left').style.height = document.getElementById('right').offsetHeight + 'px';
    </script>

    3、背景图欺骗-看似等高

    如果左右2部分都有可平铺的背图,可以切一条铺早父元素上,父元素高度是随子元素延展的,看上去也等高了,如下图




  • 相关阅读:
    Hanlp(汉语言处理包)配置、使用、官方文档
    Mysql 在DOS窗口下的操作
    漂亮的省级下拉选择
    数组的应用排序
    设置外部样式坐标的位置
    动态设置Div坐标
    对联广告
    树形菜单
    隐藏图和图框架
    使用clssneme改变图片或样式
  • 原文地址:https://www.cnblogs.com/bianyuan/p/2356144.html
Copyright © 2011-2022 走看看