Javascript/CSS - 将动态内容对齐到相同的高度

Question

我动态生成可以具有每个单独行数的内容块。 如果它们在“记录行”内......我希望该行内的“记录秒”具有相同的高度。

例如，这是一个块：

 <div class="row record-row">
     <div class="col-md-6">
         <form class="form-horizontal">
             <div class="form-group record-group">
                 <div class="col-sm-4 record-col">
                     <div class="record-first">
                         <label>Name:</label>
                     </div>
                 </div>
                 <div class="col-sm-8 record-col">
                     <div class="record-second">
                         <p> ... /* Dynamic content LEFT */ ... </p>
                     </div>
                 </div>
             </div>
         </form>
    </div>
    <div class="col-md-6">
        <form class="form-horizontal">
            <div class="form-group record-group">
                <div class="col-sm-4 record-col">
                    <div class="record-first">
                        <label>Adress:</label>
                    </div>
                </div>
                <div class="col-sm-8 record-col">
                    <div class="record-second">
                        <p> ... /* Dynamic content RIGHT */ ... </p>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

因此，例如在下面的块中......左边的“record-second”有 2 行，右边的“record-second”有 4 行：

 <div class="row record-row">
     <div class="col-md-6">
         <form class="form-horizontal">
             <div class="form-group record-group">
                 <div class="col-sm-4 record-col">
                     <div class="record-first">
                         <label>Name:</label>
                     </div>
                 </div>
                 <div class="col-sm-8 record-col">
                     <div class="record-second">
                         <p> ... </p>
                         <p> ... </p>
                     </div>
                 </div>
             </div>
         </form>
    </div>
    <div class="col-md-6">
        <form class="form-horizontal">
            <div class="form-group record-group">
                <div class="col-sm-4 record-col">
                    <div class="record-first">
                        <label>Adress:</label>
                    </div>
                </div>
                <div class="col-sm-8 record-col">
                    <div class="record-second">
                         <p> ... </p>
                         <p> ... </p>
                         <p> ... </p>
                         <p> ... </p>                            
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

如何确保左侧的“记录秒”与右侧的“记录秒”具有相同的高度，反之亦然？

请记住，它们有很多“记录行”......每个记录行可以有不同的高度。

小提琴： https://jsfiddle.net/oLzq2vhs/

Answer 1

这是更新的小提琴； https://jsfiddle.net/a3eknLuf/要实现这一点，您需要；

1. 循环遍历所有的.record-rows
2. 在里面时，循环遍历所有的.record-second
3. 检查每个记录秒的高度，如果它大于前一个，则将其分配给一个变量。
4. 再次循环遍历所有的.record-second 并分配它们的高度。

$(document).ready(function(){

  var tallestRecordSecond;

  // loop through record rows
  $(".record-row").each(function(){

    tallestRecordSecond = 0;

    // loop through record seconds in this row
    $(this).find(".record-second").each(function(){

        // assign the tallest record second
      if($(this).height() > tallestRecordSecond){
        tallestRecordSecond = $(this).height();
      }
    });

    // loop again and assign the height for each
    $(this).find(".record-second").each(function(){
      $(this).height(tallestRecordSecond);
    });
  });
});

Answer 2

为了帮助你，我只使用了 CSS。 我采用的方案涉及使用flexbox

Bootstrap 有不同的类来管理 flexbox，你可以在这里看到它们

因为使用它们会为您的 div 添加几个类，所以我决定只使用 CSS，这样您就更容易理解我所做的各种添加。

没有什么能阻止您通过使用 Bootstrap 类（即.d-flex 、 .h-100 、 .flex-column 、 m-0 ...）管理它们来丢弃我的 CSS 规则。 这里重要的是了解发生了什么，就我个人而言，仅查看 CSS 上的规则更容易理解。

我没有碰你的布局。 这些是我添加的规则：

.form-horizontal,
.record-second,
.record-group {
    height: 100%; /*set these div to 100% to take full advantage of flexbox*/
}

.record-group {
    display: flex; /* create a flexbox container */
    flex-direction: column;
    margin: 0;
}

.col-sm-4.record-col {
    flex: 0 0 auto; /* the first div can't grow or shrink*/
}

.col-sm-8.record-col {
    flex: 1 0 auto; /* the second div can grow to fill all the space*/
}

 .row { background: #f8f9fa; margin-top: 20px; padding-bottom: 20px; /* I added also this line */ }.col { border: solid 1px #6c757d; padding: 10px; }.record-first { padding-top: 12px; padding-bottom: 7px; padding-left: 15px; padding-right: 15px; border-top: #ffffff medium solid; border-left: #ffffff 0px solid; border-right: #ffffff 0px solid; }.record-second { padding-top: 12px; padding-bottom: 7px; padding-left: 15px; padding-right: 15px; border-top: #ffffff medium solid; border-left: #ffffff 4px solid; border-right: #ffffff 4px solid; } /* --------------------------- */ /* I added these lines of code */ /* --------------------------- */.form-horizontal, .record-second, .record-group { height: 100%; }.record-group { display: flex; flex-direction: column; margin: 0; }.col-sm-4.record-col { flex: 0 0 auto; }.col-sm-8.record-col { flex: 1 0 auto; } /* --------------------------- */ /* I added these lines of code */ /* --------------------------- */

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container"> <div class="row record-row"> <div class="col-md-6"> <form class="form-horizontal"> <div class="form-group record-group"> <div class="col-sm-4 record-col"> <div class="record-first"> <label>Name:</label> </div> </div> <div class="col-sm-8 record-col"> <div class="record-second"> <p>... </p> <p>... </p> </div> </div> </div> </form> </div> <div class="col-md-6"> <form class="form-horizontal"> <div class="form-group record-group"> <div class="col-sm-4 record-col"> <div class="record-first"> <label>Adress:</label> </div> </div> <div class="col-sm-8 record-col"> <div class="record-second "> <p>... </p> <p>... </p> <p>... </p> <p>... </p> </div> </div> </div> </form> </div> </div> <div class="row record-row"> <div class="col-md-6"> <form class="form-horizontal"> <div class="form-group record-group"> <div class="col-sm-4 record-col"> <div class="record-first"> <label>Name:</label> </div> </div> <div class="col-sm-8 record-col"> <div class="record-second"> <p>... </p> <p>... </p> <p>... </p> </div> </div> </div> </form> </div> <div class="col-md-6"> <form class="form-horizontal"> <div class="form-group record-group"> <div class="col-sm-4 record-col"> <div class="record-first"> <label>Adress:</label> </div> </div> <div class="col-sm-8 record-col"> <div class="record-second"> <p>... </p> <p>... </p> <p>... </p> <p>... </p> <p>... </p> </div> </div> </div> </form> </div> </div> <div class="row record-row"> <div class="col-md-6"> <form class="form-horizontal h-100"> <div class="form-group record-group h-100"> <div class="col-sm-4 record-col"> <div class="record-first"> <label>Name:</label> </div> </div> <div class="col-sm-8 record-col"> <div class="record-second"> <p>... </p> <p>... </p> </div> </div> </div> </form> </div> <div class="col-md-6"> <form class="form-horizontal"> <div class="form-group record-group"> <div class="col-sm-4 record-col"> <div class="record-first"> <label>Adress:</label> </div> </div> <div class="col-sm-8 record-col"> <div class="record-second"> <p>... </p> <p>... </p> <p>... </p> <p>... </p> <p>... </p> </div> </div> </div> </form> </div> </div>