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>

上記の出力のバーの 1 つが最初のバーより下になっています。つまり、すべてのバーが 1 行に収まっていません。どうすればよいですか? 出来ますか ？

4

4 に答える 4

1

よし、私は JS に非常に小さな変更を加えた後、 の親を に.bar設定100%し100%まし100%た0。

さらに、 を使用すると、 が の/にbox-sizing強制的bordersに計算されます。widthheightdivs

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

これにはJSはまったく必要ありません。より良い解決策は、次のようなことです。

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

.bar {
  display: table-cell;
}

例を参照してください: http://codepen.io/anon/pen/anfgD

于 2013-10-17T18:36:36.163 に答える
0

ブラウザーは幅に水平方向のパディングを追加したため、ボックスのサイズ変更ハックを使用する必要があります。

あ、あと、1 じゃなくて 2 を引いてください。1px の境界線、1px の左の境界線、および 1px の右の境界線を組み合わせた場合でも、合計の境界線の幅は 1px ではなく 2px になるためです。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;
    }

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) + '%');
    }
});
于 2013-10-17T18:19:54.480 に答える