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

Question

我有一个 div，其中包含多个 children。我打算使用水平布局，因此我需要将 parent div 布局的宽度从左到右设置为运行。我想要 2 行，而不是单行中的所有项目，所以一旦我有了总宽度，我就需要 divide 它乘以 2，这样项目就会换到另一行。

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

mark-up 看起来有点像这样：

<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);

});

希望对您有所帮助！
乔什

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

Get total width of individual child elements (then half it)

javascript

css

jquery

layout

width