html - 垂直排列相邻的 DIV，无需强制 <BR>

Question

JSFiddle:https://jsfiddle.net/yL9b2ewu/1/

在这个 fiddle 中，我有 3 个使用 Bootstrap 3.3.7 的 DIV，它们彼此相邻；每个 DIV 是 col-sm-3 .

每个DIV包含一个固定大小的按钮，那么按钮下面应该有少量的空间，然后是可选的说明文字。每个 DIV 都应以与最低可用 DIV 相同级别的边框结尾，无论它是否有文本。

一种解决方案是硬编码一些 <BR> s 为解释部分。在第 3 个 DIV 中，我可以放入 4 个固定的 <BR>秒。但是这种 hackery 对我来说似乎不合适，应该有一些动态和健壮的东西。

                 <div class="col-md-12 col-sm-12 col-xs-12" style="margin-top:10px; margin-bottom: 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px">                        
                    <div class="col-sm-4 cardstyle">
                        <button type="button" class="btn btn-success btnSubmitWizard"><b>Submit Recall Now<br><br></b></button>
                        <br><br>No changes can be made after the recall is submitted.
        <!-- Can Insert <BR> here but wrong approach -->
                    </div>                       

                    <div class="col-sm-4 cardstyle">
                        <button type="button" class="btn btn-primary btnSubmitWizard"><b>Review and Edit<br><br></b></button>
                        <br><br>Review or edit timeline before submitting.
        <!-- Can Insert <BR> here but wrong approach -->
                    </div>

                    <div class="col-sm-4 cardstyle">
                        <button type="button" class="btn btn-primary btnSubmitWizard"><b>Logout and<br>Submit Later </b></button>
        <br><br>
                        <!-- Can Insert <BR> here but wrong approach -->
                    </div>                          
                </div>

Answer 1

我认为您可以使用 :last-child 只选择最后一个 div并为其添加更大的填充底部。