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

【问题标题】：Javascript/CSS - Align dynamic content to same heightJavascript/CSS - 将动态内容对齐到相同的高度
【发布时间】：2019-11-12 23:35:23
【问题描述】：

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

例如这样一个块：

 <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/

【问题讨论】：

您在页面中的所有记录第一和第二必须具有相同的高度，或者只有每行内的高度（即左右对）？
... 只是每行内的那些。 ...因为每一行可以有不同的高度取决于内部内容。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

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

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

由于使用它们会为您的 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>

【讨论】：

【解决方案2】：

这是更新后的小提琴； https://jsfiddle.net/a3eknLuf/ 为此，您需要：

循环遍历所有 .record-rows
在里面时，循环遍历所有的 .record-second
检查每个记录秒的高度，如果大于前一个，则将其分配给变量。
再次循环遍历所有 .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);
    });
  });
});

【讨论】：

感谢杰丁的帮助。如果可能，进行小幅调整，最后两个块（'record-row'）现在也具有第一个块的高度。是否可以根据每个块的内部高度设置每个块的高度？
@PhilippM 道歉，我更新了小提琴。代码的最后一行不正确。应该是 $(this).find(".record-second").each(function(){ $(this).height(tallestRecordSecond); }); 他们的父 div 现在应该正确调整大小。