javascript - 获取单个子元素的总宽度(然后减半)

Question

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

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

标记看起来有点像这样:

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

如果有人能帮助我，我将不胜感激。我以前设法获得了单个元素的尺寸，但我看不到为一个组做这件事。

提前致谢， 史蒂夫

Answer 1

请引用这个 fiddle :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);

});

希望对您有所帮助!
乔希