我有3个div。左边有1个div，带有col-lg-6。旁边的1 div也是col-lg-6。我有第三个div与col-lg-6。我希望第3个div始终低于div 1，即使div 3变大。
我目前的代码：
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Toe voegen
</div>
<div class="panel-body">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#producten"
data-toggle="tab"
data-target="#producten, #productenoverzicht">Producten</a>
</li>
<li><a href="#promoties" data-toggle="tab"
data-target="#promoties, #promotiesoverzicht">Promoties</a>
</li>
<li><a href="#sterartikelken" data-toggle="tab"
data-target="#sterartikelken, #sterartikelkenoverzicht">Sterartikelen</a>
</li>
<li><a href="#T4" data-toggle="tab" data-target="#T4, #T4overzicht">T4</a>
</li>
<li id="gadget-add-list"><a href="#gadgets"
data-toggle="tab"
data-target="#gadgets, #gadgetoverzicht">Gadgets</a>
</li>
<li><a href="#lossestukken"
data-toggle="tab" data-target="#lossestukken, #lossestukkenoverzicht">Lossestukken</a>
</li>
<li id="artikelenVoucher-add-list"><a
href="#artikelenVoucher" data-toggle="tab"
data-target="#artikelenVoucher, #artikelenvouchersvoucheroverzicht">Voucher</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="producten">
<div class="container-fluid">
<label for="selectcatagorie">Categorie</label><select
class="form-control" id="selectcatagorie">
<option value="" disabled selected>Selecteer een
categorie
</option>
<?php
foreach (db_select("SELECT * FROM presse_wit_categorie ORDER BY code ASC ") as $item) {
echo '<option ';
echo 'value = "' . $item['GUID'] . '">';
echo '(' . $item['code'] . ') ' . $item['description'];
echo '</ option>';
}
?>
</select>
<label for="selectproduct">Product</label><select id="selectproduct"
class="form-control"
style="visibility: hidden">
</select>
<label for="aantalproduct">Aantal</label><input id="aantalproduct"
class="form-control"
type="number"
value="1"/>
<br>
<div class="form-group">
<button type="button" class="btn btn-success"
onclick="addProduct('')"
id="addproductbutton">
Voeg
toe!
</button>
</div>
</div>
</div>
<div class="tab-pane fade" id="promoties">
<label for="selectPromotie">Promotie:</label><select id="selectPromotie"
class="form-control">
</select>
<label for="aantalPromoties">Aantal:</label><input id="aantalPromoties"
class="form-control"
type="number"
value="1"
/>
<br>
<div class="form-group">
<button type="button" class="btn btn-success"
onclick="addPromotie('')"
id="addpromotiebutton">
Voeg
toe!
</button>
</div>
</div>
<div class="tab-pane fade" id="sterartikelken">
<label for="selectSterArtikel">Ster Artikel:</label><select
id="selectSterArtikel"
class="form-control">
</select>
<label for="aantalSterArtikel">Aantal:</label><input id="aantalSterArtikel"
class="form-control"
type="number"
value="1"
/>
<br>
<div class="form-group">
<button type="button" class="btn btn-success"
onclick="addSterartikel('')"
id="addSterArtikelbutton">
Voeg
toe!
</button>
</div>
</div>
<div class="tab-pane fade" id="T4">
<label for="selectT4">T4:</label><select id="selectT4"
class="form-control"
>
</select>
<label for="aantalT4">Aantal:</label><input id="aantalT4"
class="form-control"
type="number"
value="1"
/>
<br>
<div class="form-group">
<button type="button" class="btn btn-success"
onclick="addT4('')"
id="addT4button">
Voeg
toe!
</button>
</div>
</div>
<div class="tab-pane fade" id="gadgets">
<label for="selectGadget">Gadget:</label><select id="selectGadget"
class="form-control"
>
</select>
<label for="aantalGadget">Aantal:</label><input id="aantalGadget"
class="form-control"
type="number"
value="1"
/>
<br>
<div class="form-group">
<button type="button" class="btn btn-success"
onclick="addGadget('')"
id="addGadgetbutton">
Voeg
toe!
</button>
</div>
</div>
<div class="tab-pane fade" id="lossestukken">
<label for="refLosstuk">Code</label><input id="refLosstuk" type="text"
class="form-control">
<label for="descLosstuk">Omschrijving</label><input id="descLosstuk" type="text"
class="form-control">
<label for="aantalLosstuk">Aantal:</label><input id="aantalLosstuk"
class="form-control"
type="number"
value="1"
/>
<label for="priceLosstuk">Prijs</label><input id="priceLosstuk" type="text"
class="form-control">
<br>
<div class="form-group">
<button type="button" class="btn btn-success"
onclick="addLosstuk('')"
id="addLosstukbutton">
Voeg
toe!
</button>
</div>
</div>
<div class="tab-pane fade" id="artikelenVoucher">
<div class="container-fluid">
<label for="selectcatagorievoucher">Categorie</label><select
class="form-control" id="selectcatagorievoucher">
<option value="" disabled selected>Selecteer een
categorie
</option>
<?php
foreach (db_select("SELECT * FROM presse_wit_categorie ORDER BY code ASC ") as $item) {
echo '<option ';
echo 'value = "' . $item['GUID'] . '">';
echo '(' . $item['code'] . ') ' . $item['description'];
echo '</ option>';
}
?>
</select>
<label for="selectproductvoucher">Product</label><select
id="selectproductvoucher"
class="form-control"
style="visibility: hidden">
</select>
<label for="aantalproductvoucher">Aantal</label><input
id="aantalproductvoucher"
class="form-control"
type="number"
value="1"/>
<br>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<button type="button" class="btn btn-success"
onclick="addProductVoucher('')"
id="addproductvoucherbutton">
Voeg
toe!
</button>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<label for="remainingVoucher">Overblijvend:</label><input
type="text"
id="remainingVoucher"
class="form-control"
value="€ 0,00"
disabled>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<label for="totaalVoucher">Totaal:</label><input type="text"
id="totaalVoucher"
class="form-control"
value="€ 0,00"
disabled>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 ">
<div class="panel panel-default">
<div class="panel-heading">
Overzichten
</div>
<div class="panel-body">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="productenoverzicht">
<div class="table-responsive">
<table id="productstable" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="productstablebody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="promotiesoverzicht">
<div class="table-responsive">
<table id="promotiestable" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="promotiestablebody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="sterartikelkenoverzicht">
<div class="table-responsive">
<table id="sterartikelentable" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Ster</th>
<th>Aantal</th>
<th></th>
</tr>
</thead>
<tbody id="sterartikelentablebody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="T4overzicht">
<div class="table-responsive">
<table id="T4table" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="T4tablebody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="gadgetoverzicht">
<div class="table-responsive">
<table id="gadgetstable" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="gadgetstablebody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="lossestukkenoverzicht">
<div class="table-responsive">
<table id="lossestukkentable" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="lossestukkentablebody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="artikelenvouchersvoucheroverzicht">
<div class="table-responsive">
<table id="artikelenvoucherstable" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="artikelenvoucherstablebody">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Totalen
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="totaalArtikelen">Totaal artikelen:</label><input type="text"
id="totaalArtikelen"
name="totaalArtikelen"
class="form-control"
value="€ 0,00"
disabled>
</div>
<div class="form-group">
<label for="totaalPromoties">Totaal promoties:</label><input type="text"
id="totaalPromoties"
name="totaalPromoties"
class="form-control"
value="€ 0,00"
disabled>
</div>
<div class="form-group">
<label for="totaalGadgets">Totaal gadgets:</label><input type="text"
id="totaalGadgets"
name="totaalGadgets"
class="form-control"
value="€ 0,00"
disabled>
</div>
<div class="form-group">
<label for="totaalLossestukken">Totaal lossestukken:</label><input
type="text"
id="totaalLossestukken"
name="totaalLossestukken"
class="form-control"
value="€ 0,00"
disabled>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<div class="form-group">
<label for="totaalT1">Totaal T1</label><input id="totaalT1"
name="totaalT1"
type="text"
class="form-control"
value="€ 0,00" disabled>
</div>
<label for="totaalT4">Totaal T4:</label><input type="text"
id="totaalT4"
name="totaalT4"
class="form-control"
value="€ 0,00"
disabled>
</div>
<div class="form-group">
<label for="totaalSterren">Totaal Sterren</label><input id="totaalSterren"
name="totaalSterren"
type="text"
class="form-control"
value="0" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="algemeenTotaal">Algemeen Totaal:</label><input
id="algemeenTotaal"
name="algemeenTotaal"
type="text"
class="form-control text-primary"
value="€ 0,00" disabled>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is an image of what is happening and what I would like to achieve:
提前谢谢！
答案 0 :(得分：0)
放一个演示小提琴或其他东西会有所帮助，但仍然...... 得到第1个div低于1，你需要有这样的东西..
<div class="col-lg-12">
<div class="col-lg-6">
<div class="col-lg-12">
/********* DIV 1 HERE *************/
</div>
<div class="col-lg-12">
/********* DIV 3 HERE ***************/
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-12">
/********* DIV 2 HERE ************/
</div>
</div>
</div>
希望它有所帮助。让我知道它是否清楚！
答案 1 :(得分：0)
您可以为第三个div添加css：
clear: both;
答案 2 :(得分：0)
使用bootstrap的网格系统。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-xs-6" style="background-color:red;">
<h1>
DIV 1
</h1>
<h1>
DIV 1
</h1>
</div>
<div class="col-xs-6" style="background-color:green;">
<h1>
DIV 2
</h1>
<h1>
DIV 2
</h1>
<h1>
DIV 2
</h1>
<h1>
DIV 2
</h1>
</div>
</div>
<div class="col-xs-6" style="background-color:red;">
<h1>
DIV 3
</h1>
</div>
</body>
</html>