Question

我的页面上有三个div，我希望它们在左侧放置两个较小的div，在右侧放置一个较大的div（见图片）。现在，第三个div被放置在第二个div下面的另一行。

如何移动第三个div？

PS-如果需要，div可以重新排列。我只想要左边的两个较小的和右边的较大的一个。

div placement

HTML：

<div class="row">
    <div class="col-md-6">
        <div class="content">
            <h2>DIV 1
            </h2>
        <form class="form-income form-horizontal" role="form" method="post" action="/profile/update">
    <div class="form-group">
        <label for="paycheck" class="control-label col-sm-3">Paycheck/Salary</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" id="paycheck" />
        </div>
    </div>
    <div class="form-group">
        <label for="investments" class="control-label col-sm-3">Investments</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span>
          <input type="text" class="form-control" id="investments" />
        </div>
    </div>
    <div class="form-group">
        <label for="otherIncome" class="control-label col-sm-3">Other</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" id="otherIncome" />
        </div>
    </div>

    <button class="btn btn-lg btn-primary btn-block" id="update-income" type="submit" >Update</button>
    <div class="resultsIncome"></div>
</form>

        </div>
    </div>

    <div class="col-md-6">
        <div class="content">
            <h2>DIV 2
            </h2>
        <form class="form-expenses form-horizontal" role="form" method="post" action="/profile/update">
    <div class="form-group">
        <label for="" class="control-label col-sm-3">Rent/Mortgage</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" id="" />
        </div>
    </div>
    <div class="form-group">
        <label for="" class="control-label col-sm-3">Utilities</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span>
          <input type="text" class="form-control" id="" />
        </div>
    </div>
    <div class="form-group">
        <label for="" class="control-label col-sm-3">Groceries</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" id="" />
        </div>
    </div>
    <div class="form-group">
        <label for="" class="control-label col-sm-3">Automobile</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" id="" />
        </div>
    </div>
    <div class="form-group">
        <label for="" class="control-label col-sm-3">Loans/Debt</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span>
          <input type="text" class="form-control" id="" />
        </div>
    </div>
    <div class="form-group">
        <label for="" class="control-label col-sm-3">Credit Card</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" id="" />
        </div>
    </div>
    <div class="form-group">
        <label for="" class="control-label col-sm-3">Insurance</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" id="" />
        </div>
    </div>
    <div class="form-group">
        <label for="" class="control-label col-sm-3">Personal Care</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span>
          <input type="text" class="form-control" id="" />
        </div>
    </div>
    <div class="form-group">
        <label for="" class="control-label col-sm-3">Entertainment</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" id="" />
        </div>
    </div>
    <div class="form-group">
        <label for="" class="control-label col-sm-3">Other</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" id="" />
        </div>
    </div>
    <button class="btn btn-lg btn-primary btn-block" id="update-expenses" type="submit">Update</button>
    <div class="resultsExpenses"></div>
</form>

        </div>

    </div>

    <div class="col-md-6">
        <div class="content">
            <h2>DIV 3
            </h2>
        <form class="form-income form-horizontal" role="form" method="post" action="/profile/update">
    <div class="form-group">
        <label for="paycheck" class="control-label col-sm-3">Paycheck/Salary</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" id="paycheck" />
        </div>
    </div>
    <div class="form-group">
        <label for="investments" class="control-label col-sm-3">Investments</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span>
          <input type="text" class="form-control" id="investments" />
        </div>
    </div>
    <div class="form-group">
        <label for="otherIncome" class="control-label col-sm-3">Other</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" id="otherIncome" />
        </div>
    </div>
    <button class="btn btn-lg btn-primary btn-block" id="update-income" type="submit" >Update</button>
    <div class="resultsIncome"></div>
</form>

        </div>
    </div>

Answer 1

您已将DIV1和DIV3放在第一列中，如下所示：

<div class="row">
  <div class="col-md-6">
    <div class="content">
      DIV1
    </div>
    <div class="content">
      DIV3
    </div>
  </div>
  <div class="col-md-6">
    <div class="content">
      DIV2
    </div>
  </div>
</div>

以下是HTML的更新：http://jsfiddle.net/Larf3/1/

HTML / CSS：Bootstrap 3 div放置，左边2，右边1

1 个答案: