Question

我有一个包含多个孩子的div。我打算使用水平布局，所以我需要在父div上设置一个宽度，使布局从左到右运行。而不是单行中的所有项目我想要2行，所以一旦我有总宽度，我需要将它除以2，以便项目换行到另一行。

子项的数量会发生变化，因此在这种情况下CSS值不合适。

加价看起来有点像这样：

<div id="container">
  <figure>1</figure>
  <figure>2</figure>
  <figure>4</figure>
  <figure>5</figure>
  <figure>6</figure>
</div>

真的很感激，如果有人可以帮助我。我之前设法得到了单个元素的尺寸，但我看不到为一个组做到这一点。

提前致谢，史蒂夫

Answer 1

请参考这个小提琴：https://jsfiddle.net/m6k1jamd/

要做到这一点，必须做的是：
- 在页面加载时获得图形的预定义宽度（在css中设置）
- 获取容器内的girues数量 - 计算每行显示多少个数字（你想要2行） - 使用 Math.ceil（）
强制2行 - 通过计算每行数字*图形宽度来确定每行的宽度 - 将容器宽度设置为计算的行宽。

来自逻辑的Javascript

$(document).ready(function(){

    //Get the figures width
    var figure_width = $("#container figure").css("width").replace("px", "");

    //Get num figures
    var num_figures = $("#container figure").length;

    //Work out how manay figures per row
    var num_row_figures = Math.ceil(num_figures / 2);

    //Get the total width
    var row_width = figure_width * num_row_figures;

    //Set container width to half the total
    $("#container").width(row_width);

});

希望这有帮助！
约什

获取单个子元素的总宽度（然后减半）

1 个答案: