html - 使下一个兄弟推送到相对定位的元素上

Question

我有一个小问题。使同级插入所述 div 的最后一个元素的最佳方法是什么？这是结构:

<div class="row">
    <div class="formContainer col-lg-6">
        <form>
            <fieldset>
                ...content....
                <button>Submit Form</button>
            </fieldset>
        </form>
    </div>
    <div class="col-lg-6" id="datePicker">
       calendar where user picks dates
    </div>
</div>

和 CSS(或多或少)

form > button {
    width: 200px;
    margin: auto;
    display: block;
    margin-bottom: 15px;
    position: relative;
    right: -54%;
}

以图片为例:

我想让右边的 col-6 div 按下左边 col-6 中的保存按钮，因为添加的最右边的 div 元素开始重叠。我应该怎么做？

Answer 1

这样做就可以了:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="row">
    <div class="formContainer col-lg-6">
        <form>
            <fieldset>
                ...content....
            </fieldset>
        </form>
    </div>
    <div class="col-lg-6" id="datePicker">
       calendar where user picks dates
    </div>
    <div class="col-lg-12 text-center">
       <button class="btn btn-default"
               onclick="$('.formContainer form', $(this).closest('.row')).submit();">Submit Form</button>
    </div>
</div>

请注意，我将按钮移到了新列中，并且在按下时使用内联 Javascript 提交表单。