2013-12-12 2 views
0

У меня есть три div s на моей странице, и я хочу, чтобы они были размещены с двумя меньшими div s слева и большими div справа (см. картина). Прямо сейчас третий div помещается в другую строку ниже второго div.HTML/CSS: размещение Boostrap3 с 2 слева, 1 справа

Как я могу переместить этот третий div?

PS- div s может быть перестроен, если необходимо. Я просто хочу, чтобы два меньших слева и больше справа.

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

Смежные вопросы