Question

我正在尝试计算div的子项，然后设置父项的宽度。我有的问题是数据是动态加载的，所以我永远不知道那里会有多少个孩子。父节点占用所有子节点的总宽度并设置不正确的宽度（太大）。

例如，4个孩子，它设置4 x 750px。使父div为3000px。

所以我想我可以使用jquery来计算div，取父母的宽度并将其除以子节点的jquery数。

<div class="outer-container">
<div class="box-slide">Slide 1</div>
<div class="box-slide">Slide 2</div>
<div class="box-slide">Slide 3</div>
<div class="box-slide">Slide 4</div>
</div>

输出如下：

outer-container: width: 3000px
box-slider: width: 750px

我需要外容器为750px。有些人会问为什么我不对外部容器进行硬编码。这些div响应迅速，应该是他们所在容器的100％。

Answer 1

我可以假设您的盒子滑动课程项目（儿童）具有固定宽度。在这种情况下，你必须考虑一些事情：

由于它们是750px，它们在FHD，高清显示器中可能看起来不错，但在QHD中却没有。取决于您如何排序项目。如果您不知道项目的宽度，而父项应该是这个大小，请考虑使用display：table |表格行table-cell自动生成适合大小的项目：

    <style>
        .DisplayTable{
            display: table;
        }.DisplayTableCell{
            display: table-cell;
        }.DisplayTableRow{
            display: table-row;
        }

        .LeftFloated{
            float: left;
        }
    </style>

    <div class="DisplayTable"></div>
        <div class="DisplayTableRow">
            <div class="DisplayTableCell LeftFloated">A</div>
            <div class="DisplayTableCell LeftFloated">A</div>
            <div class="DisplayTableCell LeftFloated">A</div>
            <div class="DisplayTableCell LeftFloated">A</div>
        </div>
    </div>
    <script type="text/javascript">
        var children = document.getElementsByClassName("DisplayTableCell LeftFloated");
        for (var i = 0; i < children.length; i++)
            console.log( "Width: " + children[i].offsetWidth );

        console.log( children[0].parentElement.offsetWidth );
    </script>

控制台中的输出是：px中每个子节点的宽度，以及父节点中可能包含最多子节点的宽度。这并没有考虑到溢出。

在我的示例中，根据我的浏览器字体大小，输出为：

12 -> Children[0]
12 -> Children[1]
12 -> Children[2]
12 -> Children[3]
48 -> Parent element

计算div的子项，执行计算并设置css

1 个答案: