平均分布的一些问题

来源：互联网发布：ubuntu关机命令编辑：程序博客网时间：2024/05/16 02:08

有关平均分布的一些方法:

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>平均分布</title>        <style>            ul,li {                margin: 0;                padding: 0;                list-style: none;            }            div.nav {                border: 1px solid #000;            }            a {                text-decoration: none;                color: #999;                display: inline-block;                height: 40px;                line-height: 40px;            }            /*使用css3方法*/            ul.u1 {/*这种方法的兼容性最差,IE10-不支持*/                width: 60%;                margin: 0 auto;                display: -webkit-box;                -webkit-box-align: stretch;                -webkit-box-pack: justify;            }            ul.u3 {/*这种方法IE10+支持*/                width: 60%;                margin: 0 auto;            display: -webkit-flex;            display: flex;            -webkit-justify-content: space-between;            justify-content: space-between;            }            /*计算宽度再居中*/            ul.u2 {/*都支持*/                overflow: hidden;            }            ul.u2 li {                float: left;                width: 33.3%;                text-align: center;            }            ul.u2 li a {                width: 100%;            }                   </style>    </head>    <body>        <div class="nav">            <ul class="u1">                <li><a href="#">首页</a></li>                <li><a href="#">首页</a></li>                <li><a href="#">首页</a></li>            </ul>            <ul class="u2">                <li><a href="#">首页</a></li>                <li><a href="#">首页</a></li>                <li><a href="#">首页</a></li>            </ul>            <ul class="u3">                <li><a href="#">首页</a></li>                <li><a href="#">首页</a></li>                <li><a href="#">首页</a></li>            </ul>        </div>    </body></html>

对于左图右文字,要求文字相对于图片居中显示,IE9中没有找到太有效的方法,(不支持display: flex;align-items: center;这一方法) 现在这里使用了一段js代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>左图右文字+居中</title>        <style>            .content {                width: 300px;            }            img {                width: 100px;                height: 100px;                vertical-align: middle;            }            .d2 {/*这种方法在IE10-不支持,IE10中文字不换行*/                display: -webkit-flex;            display: flex;            -webkit-align-items: center;            align-items: center;            }            .d3 {                height: 100px;                margin-top: 10px;                overflow: hidden;                   position: relative;            }            /*利用这种定位的方法可以在IE7-实现居中的效果*/            .d3 div.item1 {                position: absolute;            }            .d3 div.item2 {                width: 200px;                position: absolute;                right: 0;                top: 50%;            }            .d3 div.item2 div {                position: relative;                top: -50%;            }        </style>    </head>    <body>        <div class="content">            <!--这种方式在限定的宽度里如果文字太长就会被挤到文字下方-->            <div class="d1">                <img src="img/th.jpg"/>                <span>记得发空间打开空间快捷快递卡机的空间宽带缴费卡就卡加快点击付款</span>            </div>            <div class="d2">                <div class="item">                    <img src="img/th.jpg"/>                </div>                <div class="item">记得发空间打开空间快捷快递卡机的空间宽带缴费卡就卡加快点击付款</div>            </div>            <div class="d3">                <div class="item1"><img src="img/th.jpg" alt="" /></div>                <div class="item2">                    <div>记得发空间打开空间快捷快递卡机的</div>                </div>            </div>        </div>        <script>            var ele = document.getElementsByClassName('item2')[0];//          低版本的IE不支持getComputedStyle,使用currentStyle//          IE8- 不支持getElementsByClassName            var height = parseFloat((window.getComputedStyle)?                                    (window.getComputedStyle(ele).height):                                    (window.currentStyle(ele).height));            var mtop = height/2;            document.getElementsByClassName('item2')[0].style.marginTop = -mtop + "px";        </script>    </body></html>

0 0