账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    flex下,如何定义固定的宽度?
    22
    0
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>demo</title>
        <script>
            ; (function (designWidth, maxWidth) {
                    var doc = document,
                        win = window;
                    var docEl = doc.documentElement;
                    var tid;
                    var rootItem, rootStyle;
    
                    function refreshRem() {
                        var width = docEl.getBoundingClientRect().width;
                        if (!maxWidth) {
                            maxWidth = 540;
                        }
                        ;
                        if (width > maxWidth) {
                            width = maxWidth;
                        }
                        //与淘宝做法不同,直接采用简单的rem换算方法1rem=100px
                        var rem = width * 100 / designWidth;
                        //兼容UC开始
                        rootStyle = "html{font-size:" + rem + 'px !important}';
                        rootItem = document.getElementById('rootsize') || document.createElement("style");
                        if (!document.getElementById('rootsize')) {
                            document.getElementsByTagName("head")[0].appendChild(rootItem);
                            rootItem.id = 'rootsize';
                        }
                        if (rootItem.styleSheet) {
                            rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
                        } else {
                            try {
                                rootItem.innerHTML = rootStyle
                            } catch (f) {
                                rootItem.innerText = rootStyle
                            }
                        }
                        //兼容UC结束
                        docEl.style.fontSize = rem + "px";
                    };
                    refreshRem();
    
                    win.addEventListener("resize", function () {
                        clearTimeout(tid); //防止执行两次
                        tid = setTimeout(refreshRem, 300);
                    }, false);
    
                    win.addEventListener("pageshow", function (e) {
                        if (e.persisted) { // 浏览器后退的时候重新计算
                            clearTimeout(tid);
                            tid = setTimeout(refreshRem, 300);
                        }
                    }, false);
    
                    if (doc.readyState === "complete") {
                        doc.body.style.fontSize = "16px";
                    } else {
                        doc.addEventListener("DOMContentLoaded", function (e) {
                            doc.body.style.fontSize = "16px";
                        }, false);
                    }
                })(828, 750);
        </script>
        <style>
            .flex-h {
                display: flex;
            }
    
            .flex-h .left {
                flex-grow: 2;
            }
    
            .flex-h .img-group {
                flex-grow: 0;
                margin-left: 0.22rem;
                width: 1.90rem;
                height: 1.31rem;
                border-radius: 0.08rem;
                overflow: hidden;
                outline: 1px red solid;
            }
    
            .flex-h .img-group img {
                width: 100%;
            }
        </style>
    </head>
    
    <body>
        <div class="flex-h">
            <div class="left">
                测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            </div>
            <div class="img-group">
                233
            </div>
        </div>
    </body>
    
    </html>

    已上是可运行的代码(谷歌浏览器测试)
    请问,应该如何固定.img-group的宽度(.left自适应宽度)?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部