如何在一個div中添加元素，直到其寬度幾乎等於另一個div？

Question

我有2個容器，一個在另一個容器中，我試圖用document.ready元素填充內部容器，因此它的寬度幾乎等於外部容器的div寬度。

它與window.resize上的“ if”語句完美配合，但是由於我需要在document.ready上填充div，因此我試圖使用“ while”，但它不起作用。 為什么？

這是HTML：

<style>
    #outer {float: left; width: 500px; background: grey}
    #inner {float: left; width: auto;}
    li {float: left; margin: 0 10px}
</style>


<div id="outer">
    <ul id="inner">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

...和JS：

function width_check() {
    var ddd = $("#outer").width() - $("#inner").width();
    var sss = 0;

    if (ddd > 100) {
        sss = 1;
    } else { sss = 0 };}​


$(document).ready function() {
    width_check();

    while (sss = 1) {
        $("#inner").append('<li></li>');
        width_check();
                    }        }

Answer 1

我認為您在這里遇到范圍問題。

您有一個定義var sss = 0的函數。 但是$(document).ready支票有其自己的sss。 sss在此函數中未定義。 嘗試類似：

function width_check()
{
    var ddd = $("#outer").width() - $("#inner").width();
    return ddd > 100;
}​


$(document).ready( function() // check the extra brackets around the function.
{
    while(width_check()) // check the width every time
    {
        $("#inner").append('<li></li>');
    }       
});

Answer 2

像marnix所說的那樣，並添加display: block; 給你的li