平均分布的一些问题

最新推荐文章于 2023-11-09 14:53:40 发布

一颗粒普斯

最新推荐文章于 2023-11-09 14:53:40 发布

阅读量1k

点赞数

分类专栏：兼容性垂直居中平均分布

本文链接：https://blog.csdn.net/CODING_1/article/details/60469527

版权

兼容性同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

垂直居中

1 篇文章 0 订阅

订阅专栏

平均分布

1 篇文章 0 订阅

订阅专栏

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

<!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

收藏

觉得还不错? 一键收藏
0
评论
平均分布的一些问题

有关平均分布的一些方法:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>平均分布</title> <style> ul,li { margin: 0; padding: 0;
复制链接

扫一扫

专栏目录