2013-12-12 149 views
0

我的頁面上有三個div s,我希望它們在左側放置兩個較小的div s,在右側放置一個較大的div(請參閱圖片)。現在,第三個div被放置在第二個div下面的不同行中。HTML/CSS:Boostrap3 div放置,左邊是2,右邊是1

如何將第三個div向上移動?

PS-如果需要,div可以重新排列。我只想要左側的兩個較小的一個,右側的較大的一個。

div placement

活生生的例子:http://jsfiddle.net/Larf3/

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> 

回答

2

你已經把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/

+0

OF COURSE !!這是在我的鼻子下。謝謝!而通過DIV1和DIV2,我假設你的意思是DIV1和DIV3。 – Keven

+0

對。我編輯了答案。 – cantonic