Question

我正在尝试让无限量的div彼此相邻，但我根本就没有想法。

容器div的固定宽度如下：

#container {
    width: 800px;
}

现在，html看起来像这样

<div id="container">
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    etc etc etc
</div>

如果纯CSS不可能使用jQuery，我如何实现这种功能呢？

我忘了告诉div的行为。当有2个div时，它们都应该占50％，如果有4个，它们应该占25％。这是预期的行为。

Answer 1

你可以这样做：

   var total = 100;
   var length = $('#container .div').length;
   var percent = total/length+'%';
$('#container .div').each(function(){
   $(this).width(percent);
});

每个div获得相同的宽度％

Answer 2

如果你愿意，可以把我扔到公共汽车下面，但这听起来非常像是table-layout:fixed的桌子。

http://jsfiddle.net/9stwT/

Answer 3

查看此fiddle了解99.9％的工作解决方案。您可以动态计算div的宽度并进行设置。然而，div元素变得太小，数学将开始破坏，但这只是在div s开始变得小于大约13px时。不确定你的div会变得多么小。有趣的是，由于css舍入，这实际上并没有给每个div完全相同的宽度。所以我们需要做的是采用剩余像素，并尽可能多地div分配它们。

编辑，这是代码

var divnum = 0;

function ranColor() {
    var col = '#'+Math.floor(Math.random()*16777215).toString(16);
    return col;
}

$("#addDiv").click( function() {
    divnum++;
    $(".container").append("<div id='div"+divnum+"'>"+divnum+"</div>");
    $("#div"+divnum).css("background-color", ranColor());
    var size = $(".container").children().size();
    var width = Math.floor($(".container").width()/size);

    $(".container").children().css("width", width+"px");

    var leftover = ($(".container").width()-width*divnum).toFixed(0);

    while ( leftover > 0 ) {
        var theDiv = $(".container").find("div").eq(leftover%size);
        var divwidth = $(theDiv).width();
        $(theDiv).css("width", divwidth+1);
        leftover--;
    }
});

Answer 4

我会这样做：

#container {
    /* set a height for further control */
    overflow: auto;
    width: 800px;
}

.div {
    float: left;
    /* set width and margins for spacing */
}

Answer 5

纯CSS可以实现。我添加了一些jQuery，只是为了说明这些面板是并排的。

<强> http://jsfiddle.net/2e2PF/

HTML :(主要用于装饰的下划线）

<div id="container">
    <div id="panels">
        <div class="panel _p1"></div>
        <div class="panel _p2"></div>
        <div class="panel _p3"></div>
    </div>
</div>

<强> CSS ：

#container {
    height: 300px;
    overflow: hidden;
    width: 400px;
}
    #panels {
        height: 100%;
        position: relative;
        width: 20000em;
    }
        .panel {
            float: left;
            height: 100%;
            width: 400px;
        }
        ._p1 { background: #FF0000; }
        ._p2 { background: #00FF00; }
        ._p3 { background: #0000FF; }

Answer 6

不要忘记考虑应用于每个div的任何间距，例如：

            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
            <style type="text/css">
            #container {width:800px;}
            #container div{border:1px solid; margin:1px; float:left;}
            </style>
            <script type="text/javascript">
            $(function(){
                $('#container div').width($('#container').width()/$('#container div').size() - 4 /*you'll have to take into account border and margin*/);
            });
            </script>
            <div id="container">
            <div>&nbsp;t</div><div>&nbsp;t</div><div>&nbsp;t</div>
            </div>

另请注意，一旦文档被完全加载，javascript就会被$（function（）{/ 在这里做东西 /}）中的文本完全加载;

如何让无限量的div显示在彼此旁边

6 个答案: