Question

我有div需要在div之后显示，但它显示在

之前

以下是它的样子

这是代码

<div style="width:100%;height:500px;border-style:solid;border-color:#1d69b4;margin-top:25px; white-space:nowrap;">
<div style="float:left; width:70%;height:100%;margin-left: 80px;">
    <div style="width:50%;height:30%;float:left;margin-top:20px;">
        <form>
            <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;border-width: 1px;" />
            <input class="form-control" type="text" id="from" name="from" placeholder="From" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;border-width: 1px;" />
        </form>
    </div>
    <div style="width:50%;height:30%;float:right;margin-top:20px;">
        <form>
            <input type="text" class="form-control" id="birth" name="birth" placeholder="Date of birth" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;border-width: 1px;" />
            <input class="form-control" type="text" id="to" name="to" placeholder="To" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;border-width: 1px;" />
        </form>
     </div>
    <div>sdkfhsdfgdsjfgjdf</div>
  </div>

但它必须在div之后，而不是之前。

麻烦在哪里？

Answer 1

你错过了一个结束的div而第二个div有一个浮动。这使它脱离了正常的文档流程。将float:left添加到另一个div，看起来不错。

<div style="width:100%;height:500px;border-style:solid;border-color:#1d69b4;margin-top:25px; white-space:nowrap;">
  <div style="float:left; width:70%;height:100%;margin-left: 80px;">
    <div style="width:50%;height:30%;float:left;margin-top:20px;">
      <form>
        <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;border-width: 1px;" />
        <input class="form-control" type="text" id="from" name="from" placeholder="From" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;border-width: 1px;" />
      </form>
    </div>
    <div style="width:50%;height:30%;float:right;margin-top:20px;">
      <form>
        <input type="text" class="form-control" id="birth" name="birth" placeholder="Date of birth" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;border-width: 1px;" />
        <input class="form-control" type="text" id="to" name="to" placeholder="To" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;border-width: 1px;" />
      </form>
    </div>
    <div style="float:left;">sdkfhsdfgdsjfgjdf</div>
  </div>
</div>

div之后的div不能按预期工作

1 个答案: