Question

我使用ng-repeat（Angular JS）在项目中创建一组按钮，我假设它们具有最大文本长度，因此所有按钮都在一行中。（例如1行x 4个按钮）

如果任何一个按钮带有其他内容，则最后一个按钮将移动到下一行。所以我得到（1行x 3按钮＆amp;＆amp; 1行x 1按钮）

在这种情况下，我想将按钮重新排列为2行x 2个按钮。如何检测按钮是否分解到下一行？

我的项目中有jquery。如果解决方案也是jquery也没有问题。

以下是示例JSFIDDLE链接

    <h4>Coded Output</h4>
<button>Hello World</button>
<button>Hello World</button>
<button>Hello World</button>
<button>Hello World</button>
<br>
<br>
<h4>Actual Output</h4>
<button>Hello World</button>
<button>Hello World -  Addln Content</button>
<button>Hello World</button>
<button>Hello World</button>

<h4>Expected Output</h4>
<div class="expected">
<button>Hello World</button>
<button>Hello World -  Addln Content</button>
<button>Hello World</button>
<button>Hello World</button>
</div>

CSS

 button{
  min-width:130px;
  height:40px
}

.expected button{
  min-width:200px !important;
}

Answer 1

如果问题是要有一个“孤儿”按钮，你可以使用flex container获得单行按钮，即使按钮的内容“太多”（文本在按钮内流动）也是如此。检查this Fiddle。检查browser's support and issues of the flex method。

HTML

<div class="container">
    <button>Hello World</button>
    ...
    <button>Hello World</button>
</div>

CSS

.container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-flex-flow: row nowrap; 
  flex-flow: row nowrap;
}
.container button { 
  -webkit-flex: 1 1 auto; 
  flex: 1 1 auto; 

  /* fix original css rules to let button's height changes */
  min-height: 40px;
  height: auto !important;
}

Answer 2

您可以使用jQuery＆＃39; .offset()或.position()来确定这些元素的位置，并比较＆＃34; top＆＃34;值以查看元素跨越的行数。

如果每个按钮组都在一个包装元素中会更容易一些，就像你使用div.expected

一样

<div id="actual">
  <h4>Actual Output</h4>
  <button>Hello World</button>
  <button>Hello World -  Addln Content</button>
  <button>Hello World</button>
  <button>Hello World</button>
</div>

javascript（包含在dom加载处理程序中）只计算行数，然后在需要时在第二个元素之后注入<br/>。 jsfiddle

$(function () {
  var rows = 0,
      last = null;
  $('#actual button').each(function () {
    var offset = $(this).offset();
    if(last !== offset.top) {
      rows++;
    }
    last = offset.top;
  });

  // Note this is hard-coded for 2 lines, and adds a line break after
  // the 2nd element, but you can change as needed to work in general
  if(rows === 2) {
    $('#actual').addClass('two-lines');
    $('#actual button:eq(1)').after('<br/>');
  }
});

检测不在单行中的元素并重新排列

2 个答案: