如何估量的div填滿所有空間

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

在上面的輸出的酒吧一個低於第一位的，即並非所有的酒吧容納在同一行，我怎麼做呢？可能嗎？如何估量的div填滿所有空間

來源

2013-10-17 John Smith

檢查：http://jsfiddle.net/XEGNE/ – karthikr

你不需要JS這在所有。一個更好的解決辦法是做類似：

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

.bar { 
    display: table-cell; 
}

見例如：http://codepen.io/anon/pen/anfgD

來源

2013-10-17 18:36:36 jbenjohnson

這是錯誤的。它不會填滿整個頁面。看到我的例子填充整個頁面：http://jsbin.com/eYUDUTa/2 – Accelerator

邊框導致寬度超過100％，強制最後一個塊放到下一行。

您可以安全地添加到解決這個問題：

* (box-sizing:border-box;)

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

來源

2013-10-17 18:16:31 jbenjohnson

- 我不知道邊界框，將讀它。 - 但是，如果我取出「邊框」，上面的代碼就像預期的那樣工作，如果我保持邊框，即使使用框大小，它也不起作用。 –

框的大小與填充有關，而不是邊框。盒子大小與邊界沒有任何關係。 – Accelerator

不包含邊界。看到這裏的圖形：http://css-tricks.com/box-sizing/ – jbenjohnson

好吧，我作出了JS一個非常小的變化，然後我的.bar父設置爲100%，這將迫使它會佔用100%，因爲它已被設置爲100%什麼也沒有 - 這是0。

另外，使用box-sizing將迫使borders來計算到divs的width/height。

jsFiddle here

更新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-17 18:18:36

謝謝。有用。它也可以工作，但不設置body和html高度。我有點困惑，雖然（100/7-2）結果在12.xx中呈現的html的寬度設置爲14.xx ....爲什麼你會減去2？ –

@JohnSmith其實，它不工作，如果你沒有設置body/html的高度..見http://jsfiddle.net/J9GqL/1/ ..至於JS，我真的不知道 - 試驗和錯誤。 –

好吧，我認爲這是正確的方法。它在我嘗試的網頁上工作。 –

由於瀏覽器添加一個水平填充的寬度，你需要使用盒子大小的黑客。

哦，還有，減去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

來源

2013-10-17 18:19:54 Accelerator

順便說一句，那減去部分得到轉換爲百分比？ –

@JohnSmith什麼？不，它完美無缺！你甚至看過jsbin嗎？ – Accelerator

@JohnSmith我還更新了我的jsbin，使其具有100％的身高。此外，您確實意識到我提出的解決方案與您選擇的最佳答案完全相同？ – Accelerator

如何估量的div填滿所有空間

回答

相關問題