Question

不确定如何做到这一点，但我试图让div表现得像在屏幕上均匀伸展的列（这是完成/简单），然后制作子列。这就是我所拥有的： JS：

$(function() {
    cols = $('.column');
    parent_width = cols.parent().width();
    col_fluff = parseInt(cols.css('padding-left'))+parseInt(cols.css('padding-right'))+parseInt(cols.css('margin-left'))+parseInt(cols.css('margin-right'));
    col_width = (Math.floor(parent_width/cols.size()-col_fluff));

    cols.each(function(){
        $(this).width(col_width);
    });
});

CSS：

#container{
    position:relative;
    width:100%;
    height:100%;
    margin-top:50px;
}
.column{
    float:left;
    top:0px;
    left:0px;
    margin-right:20px;
    outline:#000 solid 2px;
    width:20%;
}
.clear{
    clear:both;
}

HTML：

<div id="container">
    <div class="column">
    This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text 
    </div>
    <div class="column">
    This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text 
    </div>
    <div class="clear">clear</div>
</div><!-- end container -->

在您尝试插入内部列之前，这样可以正常工作：

<div id="container">
    <div class="column">
    This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text 
        <div class="column">
            inner column
        </div>
        <div class="column">
            inner column
        </div>
    </div>
    <div class="column">
    This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text 
    </div>
    <div class="clear">clear</div>
</div><!-- end container -->

有什么想法吗？

Answer 1

您可以从外部到内部列按级别排列列宽度：

定义一个函数，该函数接受包含$('.column')元素的最外层父元素并激活它的直接子元素，然后以递归方式将相同的函数应用于每个$('.column')子元素（现在作为父元素，以安排其子元素） ...

$(function(){
    function Arrange(colsParent){

        cols = colsParent.children('.column');
        parent_width = cols.parent().width();
        col_fluff = parseInt(cols.css('padding-left'))
                   +parseInt(cols.css('padding-right'))
                   +parseInt(cols.css('margin-left'))
                   +parseInt(cols.css('margin-right'));
        col_width = (Math.floor(parent_width/cols.size()-col_fluff));

        cols.each(function(){
            $(this).width(col_width);
        });


        cols.each(function(){
            Arrange($(this));
        });
    }

    level1ColsParent = $('.column').first().parent();

    Arrange(level1ColsParent);
});

Answer 2

我的建议是使用display:table-row，display:table-cell让事情变得更容易。它会自动以相等宽度的表格形式排列您的列和子列。

Answer 3

在我看来，由于

这个事实，你会遇到问题

cols = $('.column');

您将始终使用整个文档的该类获取所有div（以及任何其他元素），但您真正想要获得的只是特定元素的子div /元素。

您可以尝试添加一个参数，该参数是您将为每个函数调用调整大小的列的父元素。

要获取特定父元素的列，可以使用子函数。

假设您传入了父元素，您计划调整该父元素的所有div的大小，您可以使用以下行：

cols = $(parent_element).children('.column');

此外，要使函数递归，您必须从cols.each中调用自身。传递给孩子，以便他们在下一级别的电话中用作父母。我假设你可以给函数命名resize_columns_recursive。

最后，最终结果如下：

function resize_columns_recursive(parent_element){

  var cols = parent_element.children('.column');
  var col_fluff = parseInt(cols.css('padding-left'))+parseInt(cols.css('padding-right'))+parseInt(cols.css('margin-left'))+parseInt(cols.css('margin-right'));
  var col_width = (Math.floor(parent_element.width()/cols.size()-col_fluff));

  cols.each(function(){
    $(this).width(col_width);
    resize_columns_recursive(this);
  });    

}

编辑：我使用var声明使本地变量局部变量。这似乎与jsfiddle有关（见评论）。

Jquery使递归divs成为可能吗？

3 个答案: