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

上述输出中的一个条低于第一个，即并非所有条都容纳在一行中，我该怎么做？是否可以 ？

4

4 回答 4

1

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

此外，使用box-sizing将强制borders将 计算到 的width/height中divs。

jsFiddle在这里

更新了 JS -注意更改..

$(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) + '%');
    }
});

更新的 CSS

.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;
}
于 2013-10-17T18:18:36.907 回答
0

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

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

* (box-sizing:border-box;)

见http://www.paulirish.com/2012/box-sizing-border-box-ftw/

于 2013-10-17T18:16:31.940 回答
0

由于浏览器在宽度上添加了水平填充，因此您需要使用 box-sizing hack。

哦，还有，减2，不是1。因为即使是 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>

样式.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;
    }

脚本.js

$(document).ready(function () {
    var count = 7;
    var divs = $('.bar');
    for (var i = 0; i < divs.length; i++) {
        $(divs[i]).width((100 / count - 2) + '%');
    }
});
于 2013-10-17T18:19:54.480 回答
0

你根本不需要 JS。更好的解决方案是执行以下操作：

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

.bar {
  display: table-cell;
}

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

于 2013-10-17T18:36:36.163 回答