Question

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

上述输出中的一个条形低于第一个条形，即不是全部条形在一条线上容纳，我该怎么做？有可能吗？

Answer 1

好吧，我对JS进行了一些非常小的修改，然后我将.bar的父级设置为100%，这将强制它占用100%，因为它已经设置为100%无任何内容 - 0。

此外，使用box-sizing会强制borders计算到width的{{1}} / height。

jsFiddle here

更新了JS - 请注意更改..

divs

更新了CSS

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

Answer 2

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

您可以安全地添加以解决此问题：

* (box-sizing:border-box;)

请参阅http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 3

由于浏览器在宽度上添加了水平填充，因此您需要使用框大小的黑客。

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

看到这个工作jsbin：
http://jsbin.com/eYUDUTa/2/

代码（与jsbin相同）：

<强> page.html中

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

<强>的style.css

    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;
    }

<强>的script.js

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

Answer 4

你根本不需要JS。更好的解决方案是做类似的事情：

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

.bar {
  display: table-cell;
}

参见示例：http://codepen.io/anon/pen/anfgD

如何调整div的大小以填充所有空间

4 个答案: