javascript - 为 flexGrow 编写数学公式以调整 div 宽度，将字母数和窗口宽度作为变量-6ren

javascript - 为 flexGrow 编写数学公式以调整 div 宽度，将字母数和窗口宽度作为变量

转载作者：行者123 更新时间：2023-12-04 10:47:40

如果你运行下面的代码片段，你会看到我在每个 div 上有一个悬停效果，这会打开一个立即购买按钮..为了使这个工作适用于不同的语言和不同的窗口宽度，我希望使每个 div 的宽度动态取决于“立即购买”div 和窗口宽度中有多少个字母。所以我做了一个时髦的公式，但不确定如何让它在不同的窗口宽度上工作。有人可以帮我做数学吗？

变量是:
flex 成长，
窗口宽度 &
buyNowLetters(div 中的字母数)

    document.addEventListener('DOMContentLoaded', fms())

    function fms(){
        var shadeFinder = document.querySelector('.fms-wrapper')
        var shadeDiv = document.querySelectorAll('.fms-shade')
        var vw = window.innerWidth;

        //first load the right colors in to the divs
        shadeDiv.forEach(div => {
            div.style.backgroundColor = div.getAttribute("fms-bg")
        })

        //mouse hover events
        shadeDiv.forEach(div => {
            div.onmouseenter = function(event) {
                let target = event.target;
                target.classList.add('js-hover')
                var buyNowLetters = target.lastChild.innerHTML.length;
              
                //THIS IS THE FORMULA IVE BEEN TRYING WITH
                target.style.flexGrow = (20000/vw)*(buyNowLetters/19);
            };

            div.onmouseleave = function(event) {
                let target = event.target;
                target.style.background = target.getAttribute("fms-bg");
                target.classList.remove('js-hover')
                target.style.flexGrow = 1;
            };
        })
        
    }

.fms-wrapper {
    height: 300px;
    width: 100%;
    display: flex;
    margin: 100px 0;
    align-items: center;
}

.fms-shade {
    
    flex-basis: auto;
    flex-grow: 1;
    transition: all 0.8s;
    height: 100%;
    transform: scaleY(1);
    position: relative;
    margin-left:-1px;
    overflow: hidden;
    justify-content: center;
    display: flex;
    text-align: center;
    transition-timing-function: ease-in;
}

.fms-shade.js-hover {
 
    transition: all 0.2s;
    height: 120%;
    transition-timing-function: ease-out;
}


/* top bottom text before hover */
.fms-shade > .fms-shade__top {
    position: absolute;
    display: inline-block;
    opacity: 0;
    transition: all 0.2s;
}
.fms-shade > .fms-shade__bottom {
    position: absolute;
    display: inline-block;
    opacity: 0;
    transition: all 0.2s;
    bottom: 10px;
    white-space: nowrap;
}


/* hover over div */
.fms-shade.js-hover > .fms-shade__top {
    position: absolute;
    opacity: 1;
    display: block;
    text-align: center;
    transition: all 0.2s;
}
.fms-shade.js-hover > .fms-shade__bottom {
    position: absolute;
    opacity: 1;
    display: block;
    text-align: center;
    bottom: 10px;
    transition: all 0.2s;
}

<div class="fms-wrapper">
        <div f1 class="fms-shade" fms-bg="rgb(189, 72, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">B </p></div>
        <div f2 class="fms-shade" fms-bg="rgb(65, 104, 148)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BW </p></div>
        <div f3 class="fms-shade" fms-bg="rgb(95, 189, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BU W</p></div>
        <div f4 class="fms-shade" fms-bg="rgb(189, 168, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BU NW</p></div>
        <div f5 class="fms-shade" fms-bg="rgb(189, 72, 183)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BU YOW</p></div>
        <div f6 class="fms-shade" fms-bg="rgb(189, 72, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUY NOW</p></div>
        <div f7 class="fms-shade" fms-bg="rgb(65, 104, 148)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUY NOWW</p></div>
        <div f8 class="fms-shade" fms-bg="rgb(95, 189, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUY NOWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUY NOWWW</p></div>
        <div f11 class="fms-shade" fms-bg="rgb(189, 72, 183)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUU YNOWWWW</p></div>

        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"><p  class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWWWWWWW</p></div>

        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>

        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>

        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>

        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>


    </div>

我什至不确定 flexGrow 是否是最好的方法，也许有更好的方法？

最佳答案

当 div 为空时，您有一个 javascript 错误需要解决:

if(target.lastChild != null)

解决方案:

you might need to small changes on the code, but this to give an idea of how to calculate the width

使用以下 jquery 获取折叠条的宽度

if you have another idea you can implement I'm short in time thats why i used the jquery:

const barWidth =$('.fms-shade').sort(function(a, b){
                                 return $(a).width() > $(b).width(); 
                              }).first().width();

使用以下方法获取当前条形内容宽度:

var contentWidth =target.lastChild.clientWidth;

使用以下代码计算您必须将折叠的 div 宽度乘以多少次才能显示内容。

Math.ceil to get the nearest bigger integer

var flexMCount = Math.ceil(contentWidth/barWidth);

将数字分配给 flexgrow:

target.style.flexGrow =flexMCount;

检查完整代码:

document.addEventListener('DOMContentLoaded', fms())

const barWidth =$('.fms-shade').sort(function(a, b){
                                 return $(a).width() > $(b).width(); 
                              }).first().width();
                              
    function fms(){
        var shadeFinder = document.querySelector('.fms-wrapper')
        var shadeDiv = document.querySelectorAll('.fms-shade')
        var vw = window.innerWidth;

        //first load the right colors in to the divs
        shadeDiv.forEach(div => {
            div.style.backgroundColor = div.getAttribute("fms-bg")
        })

        //mouse hover events
        shadeDiv.forEach(div => {
            div.onmouseenter = function(event) {
                let target = event.target;
                target.classList.add('js-hover')
                if(target.lastChild != null)
                {
                //Get the collapsed bar width
                var contentWidth =target.lastChild.clientWidth;
                 var flexMCount = Math.ceil(contentWidth/barWidth); 
                
               
                  //THIS IS THE FORMULA IVE BEEN TRYING WITH
                  target.style.flexGrow =flexMCount;
                }
            };

            div.onmouseleave = function(event) {
                let target = event.target;
                target.style.background = target.getAttribute("fms-bg");
                target.classList.remove('js-hover')
                target.style.flexGrow = 1;
            };
        })
        
    }

.fms-wrapper {
    height: 300px;
    width: 100%;
    display: flex;
    margin: 100px 0;
    align-items: center;
}

.fms-shade {
    
    flex-basis: auto;
    flex-grow: 1;
    transition: all 0.8s;
    height: 100%;
    transform: scaleY(1);
    position: relative;
    margin-left:-1px;
    overflow: hidden;
    justify-content: center;
    display: flex;
    text-align: center;
    transition-timing-function: ease-in;
}

.fms-shade.js-hover {
 
    transition: all 0.2s;
    height: 120%;
    transition-timing-function: ease-out;
}


/* top bottom text before hover */
.fms-shade > .fms-shade__top {
    position: absolute;
    display: inline-block;
    opacity: 0;
    transition: all 0.2s;
}
.fms-shade > .fms-shade__bottom {
    position: absolute;
    display: inline-block;
    opacity: 0;
    transition: all 0.2s;
    bottom: 10px;
    white-space: nowrap;
}


/* hover over div */
.fms-shade.js-hover > .fms-shade__top {
    position: absolute;
    opacity: 1;
    display: block;
    text-align: center;
    transition: all 0.2s;
}
.fms-shade.js-hover > .fms-shade__bottom {
    position: absolute;
    opacity: 1;
    display: block;
    text-align: center;
    bottom: 10px;
    transition: all 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fms-wrapper">
        <div f1 class="fms-shade" fms-bg="rgb(189, 72, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">B </p></div>
        <div f2 class="fms-shade" fms-bg="rgb(65, 104, 148)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BW </p></div>
        <div f3 class="fms-shade" fms-bg="rgb(95, 189, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BU W</p></div>
        <div f4 class="fms-shade" fms-bg="rgb(189, 168, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BU NW</p></div>
        <div f5 class="fms-shade" fms-bg="rgb(189, 72, 183)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BU YOW</p></div>
        <div f6 class="fms-shade" fms-bg="rgb(189, 72, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUY NOW</p></div>
        <div f7 class="fms-shade" fms-bg="rgb(65, 104, 148)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUY NOWW</p></div>
        <div f8 class="fms-shade" fms-bg="rgb(95, 189, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUY NOWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUY NOWWW</p></div>
        <div f11 class="fms-shade" fms-bg="rgb(189, 72, 183)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUU YNOWWWW</p></div>

        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"><p  class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWWWWW</p></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"><p class="fms-shade__top">F9</p><p class="fms-shade__bottom">BUUYNOWWWWWWWWWWWBUUYNOWWWWWWWWWWW</p></div>

        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>

        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>

        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>

        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>


    </div>

关于javascript - 为 flexGrow 编写数学公式以调整 div 宽度，将字母数和窗口宽度作为变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59626603/

文章推荐： c# - 无法从 Linq 翻译 Odata 查询

文章推荐： java - 安卓工作室 : file written to another directory

文章推荐： perl - 我可以在包中注入(inject) perl 子程序吗？

html - 宽度 :100% vs. 宽度:继承
我的理解是 width: 100% 让元素的宽度与其父元素的宽度相同，而 width: inherit 只有在明确指定父元素的宽度时才这样做.这种理解是否正确？如果是这样，在我看来，当 width:
iphone - 如何设置 'div'元素满屏(宽度)，当iphone改变方向时，它也是全屏(宽度)
并设置“高度”为全屏的 1/2。这是我的代码: div{ background:red; } 最佳答案我会结合使用 css 和 javascript(使
html - CSS 表格 100% 宽度，td 宽度
编辑 2: 问题似乎出在规则的“bigTable”元素上。显然，在布局模板上使用时继承了错误的最小宽度。我仍在调查此事。不过，我将再尝试一次 div。一个大问题是使用固定导航和动态内容，但我已经为此
html - 100% 宽度 = 视口(viewport)宽度。如何让它和页面正文一样宽？
我的网站需要显示宽表。在它上面是标题，它应该和整个页面一样宽(在这种情况下，和表格一样宽)。但是，它的宽度与视口(viewport)(屏幕尺寸)一样宽，因此显示时看起来还不错，但是一旦用户滚动到侧面，
html - 我的 25% 宽度 flex 元素在包装后占用 100% 宽度
我有一个小问题。我总是使用 float 来安排我的元素。我正在转向 flexbox，我做了一些例子，一切都很好，但我正在做一个事情进展不顺利的例子。我有一个包含 1 到 12 种产品的容器，每行 4
html - CSS 宽度/高度与 HTML 宽度/高度属性具有不同的效果，具体取决于元素类型
例如，它们在自动边距方面会导致完全不同的行为。看看这个 fiddle :https://jsfiddle.net/L1rk46xy/ .fixed { display:fixed;
css - 在 Wordpress 帖子中为文本设置 75% 宽度，为图像设置 100% 宽度？
我尝试在帖子中将段落的宽度设置为 75%，并将图像的响应宽度设置为 100%。然而，总是在默认。 Some texts Some texts Some texts Some texts 目前，我只
html - img 元素上的 HTML 宽度/高度属性和 CSS 宽度/高度属性有什么区别？
HTML 元素可以有 width/height 属性，也可以有 CSS width/height 属性: HTML 属性和 CSS 属性有什么区别，它们应该具有相同的效果吗？最佳答案有关该主题的
javascript - jQuery - 循环遍历 TD 宽度，然后循环遍历 TH 并应用 TD 宽度
我有一个流动的 table ，现在需要一个固定的 thead。问题是当你固定 thead 时，th-s 不尊重 tbody 的 td-s 的宽度。列的大小都由 BootStrap 处理。我已经阅读了很
javascript - 两个相邻的 50% 宽度/等高字段集的正确 HTML 对齐/大小低于 100% 宽度？
我想像这样布置一个区域: ---- ---- |A | |B | | | | | ---- ---- --------- |C | --------- 三个盒子中的每一个都是 .盒子
css - Bootstrap 和 Bootstrap-Select - 使 Select 和其他元素适合 div 宽度，100% 宽度/高度
我遇到了很多问题。 1) 我正在使用 Bootstrap-Select 来获得具有搜索功能的现代选择框，但无论我尝试什么，我似乎都无法获得填充 col-span 的选择。 2) 我已将该行拆分为 2
javascript - 如何使用窗口滚动(jquery)调整 div 宽度 - 但 css 中只有 1/3 的 div 宽度
http://jsfiddle.net/95EtZ/1/ 问题在行动中解决了一半。现在它是用 javascript 中硬编码的容器宽度设置的。我需要 js 来获取容器 div 的宽度——使用窗口滚
html - 如果 parent 的 div 也是 100% 宽度/高度，如何给 child div 宽度/高度 100%
我想要两个宽度和高度均为 100% 的 div。我知道子 div 不会工作，因为父 div 没有特定的高度，但有没有办法解决这个问题？ HTML: CSS: body
jQuery动态设置高度、宽度
我需要使用 jQuery 更改的高度和宽度我尝试了以下代码 jQuery('#chart_popup').css('height','600px'); jQuery('#chart_popup')
WPF 高度/宽度
在自定义 WPF 控件中，我想将控件的宽度设置为高度的函数。例如:Width = Height/3 * x; 实现此目的的最佳方法是什么，以便控件正确且流畅地调整大小(和初始大小)？最佳答案您可以
r - R图形图中的顶点边界颜色/宽度
我正在使用igraph在R中绘制图形，执行plot(mygraph, vertex.color = "green")之类的操作。有没有办法改变顶点边界的颜色和/或宽度？最佳答案查看下面的代码；
jquery - 如何使用jquery设置图像的高度、宽度
有没有办法使用jquery设置图像的高度和宽度？以下是我的代码 var img = new Image(); // Create image $(img).load(function(){
Delphi 获取具有滚动条的组件的实际全高/宽度
这个问题类似于 how-to-find-the-actual-width-of-grid-component-with-scrollbar-in-delphi 但我无法获取 CalcDrawInfo(
边框弄乱了 HTML 宽度
这里是 HTML/CSS 新手。试图将我在 Codeacademy 上学到的知识付诸实践，但我遇到了一个问题，即我设置为 width:100% 的 header 最终离开了页面。我相信这是因为边框，
边框弄乱了 HTML 宽度
这里是 HTML/CSS 新手。试图将我在 Codeacademy 上学到的知识付诸实践，但我遇到了一个问题，即我设置为 width:100% 的 header 最终离开了页面。我相信这是因为边框，

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为 flexGrow 编写数学公式以调整 div 宽度，将字母数和窗口宽度作为变量