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

Question

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

例如，这是这样一个 block :

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

如何确保左侧的“record-second”与右侧的“record-second”高度相同，反之亦然？

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

fiddle :https://jsfiddle.net/oLzq2vhs/

Answer 1

为了帮助您，我只使用了 CSS。我采用的方案是使用flexbox

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

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

没有什么可以阻止你通过使用 Bootstrap 类(即 .d-flex、.h-100、.flex-列，m-0...)。这里重要的是了解发生了什么，就我个人而言，仅查看 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>