У меня есть три div
s на моей странице, и я хочу, чтобы они были размещены с двумя меньшими div
s слева и большими div
справа (см. картина). Прямо сейчас третий div
помещается в другую строку ниже второго div.HTML/CSS: размещение Boostrap3 с 2 слева, 1 справа
Как я могу переместить этот третий div
?
PS- div
s может быть перестроен, если необходимо. Я просто хочу, чтобы два меньших слева и больше справа.
Живой пример: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>
OF COURSE !! Это было прямо под моим носом. Благодаря! И по DIV1 и DIV2 я предполагаю, что вы на самом деле означаете DIV1 и DIV3. – Keven
Справа. Я отредактировал ответ. – cantonic