Fatal编程技术网
  • javascript/
  • Javascript 如何调整div的大小以填充所有空间 .酒吧{ 背景色：红色； 身高：100%； 显示：内联块； 边框：1px纯黑； 浮动：左； } $（文档）.ready（函数（）{ var计数=7； var divs=$（'.bar'）； 对于（变量i=0；i

Javascript 如何调整div的大小以填充所有空间 .酒吧{ 背景色：红色； 身高：100%； 显示：内联块； 边框：1px纯黑； 浮动：左； } $（文档）.ready（函数（）{ var计数=7； var divs=$（'.bar'）； 对于（变量i=0；i

javascript jquery html css

Javascript 如何调整div的大小以填充所有空间 .酒吧{ 背景色：红色； 身高：100%； 显示：内联块； 边框：1px纯黑； 浮动：左； } $（文档）.ready（函数（）{ var计数=7； var divs=$（'.bar'）； 对于（变量i=0；i,javascript,jquery,html,css,bar-chart,Javascript,Jquery,Html,Css,Bar Chart,上述输出中的一条低于第一条，即并非所有条 在一条线上住宿，我该怎么做？有可能吗？边框导致宽度超过100%，迫使最后一个块进入下一行 您可以安全地添加以修复此问题： <head> <style type="text/css"> .bar { background-color:red; height:100%; display: inline-block;

上述输出中的一条低于第一条，即并非所有条
在一条线上住宿，我该怎么做？有可能吗？

边框导致宽度超过100%，迫使最后一个块进入下一行

您可以安全地添加以修复此问题：

<head>
    <style type="text/css">
        .bar {
            background-color:red;
            height:100%;
            display: inline-block;
            border: 1px solid black;
            float:left;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>


</head>
<body>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>        
    <div class="bar"></div>        
    <div class="bar"></div>                
</body>
   <script type="text/javascript">
            $( document ).ready(function() {
                 var count = 7;
                 var divs = $('.bar');
                 for (var i = 0; i < divs.length; i++) {
                    $(divs[i]).width((100/count) +'%');
                 }
            }); 
    </script>
请看

好的，我对JS做了一个非常小的更改，然后我将
.bar
的父项设置为
100%
，这将强制它占用
100%
，因为它被设置为
100%
的空值-即
0

此外，使用
框大小调整
将强制将
边框
计算到
分区的
宽度
/
高度



更新的JS-注意更改


由于浏览器向宽度添加了水平填充，因此需要使用框大小调整

哦，还有，减去2，不是1。因为即使是1px边框，也就是1px左边框和1px右边框的组合，总边框宽度是2px而不是1px。更新了js

查看此工作jsbin:



代码（与jsbin相同）：

page.html


.bar {
     background-color:red;
     height:100%;
     display: inline-block;
     border: 1px solid black;
     float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, html {
    height:100%;
    margin:0px;
}


script.js


<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>        
    <div class="bar"></div>        
    <div class="bar"></div>    
</body>
</html>



    body, html {
        height:100%;
        margin:0px;
        padding: 0;
    }        
    .bar {
        background-color:green;
        height:100%;
        display: inline-block;
        border: 1px solid black;
        float:left;
    }
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }



$（文档）.ready（函数（）{
var计数=7；
var divs=$（'.bar'）；
对于（变量i=0；i
你根本不需要JS。更好的解决方案是采取以下措施：


$(document).ready(function () {
    var count = 7;
    var divs = $('.bar');
    for (var i = 0; i < divs.length; i++) {
        $(divs[i]).width((100 / count - 2) + '%');
    }
});



请参见示例：
选中此项：-我不知道边框框，请阅读。-但是，如果我去掉“border”，上面的代码会像预期的那样工作，如果我保留border，即使我使用box-sizing，它也不会工作。box-sizing与填充有关，而不是边框。框大小与边框无关。不包括边框。请看这里的图表：有人建议进行此编辑：该编辑被拒绝，但看起来可能添加了有价值的信息。不过，我没有判断的专业知识。您可能希望查看一下，看看是否要实现任何建议的更改。不，不包括边框。试试看，你会明白的。谢谢。它起作用了。它也可以在不设置正文和html高度的情况下工作。我有点困惑，虽然（100/7-2）的结果是12.xx，但呈现的html的宽度设置为14.xx。。。。你为什么要减去2？@JohnSmith实际上，如果你不在body/html上设置高度，它就不起作用了。。看见至于JS，我真的不知道——试错。好吧，我认为这是正确的方法。不过，我在一个网页上试用过。顺便说一句，减法部分转换成了百分比？@JohnSmith什么？不，它工作得很好！你看过jsbin了吗？@JohnSmith我还更新了我的jsbin，使其高度达到100%。另外，你知道我提出的解决方案与你选择的最佳答案完全相同？？我对所做的计算很好奇；如果count=7，它不应该导致.width（'12.28%'）而不是.width（'14.28%'）吗？这也意味着。。计数越多，留下的空白就越多。。但这并没有发生，这是错误的。它不能填满整个页面。请参见我填写整个页面的示例：

    body, html {
        height:100%;
        margin:0px;
        padding: 0;
    }        
    .bar {
        background-color:green;
        height:100%;
        display: inline-block;
        border: 1px solid black;
        float:left;
    }
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }



$(document).ready(function () {
    var count = 7;
    var divs = $('.bar');
    for (var i = 0; i < divs.length; i++) {
        $(divs[i]).width((100 / count - 2) + '%');
    }
});



.container {
  display: table;
  width: 100%;    
}

.bar {
  display: table-cell;
}