Javascript 将一个div置于另一个div之下
我有三个部门。左侧有一个带col-lg-6的div。它旁边的1个div也带有col-lg-6。我还有第三个和col-lg-6的div。我希望第三个div始终低于div 1，即使div 3变大 我当前的代码：Javascript 将一个div置于另一个div之下,javascript,html,css,twitter-bootstrap,twitter-bootstrap-3,Javascript,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我有三个部门。左侧有一个带col-lg-6的div。它旁边的1个div也带有col-lg-6。我还有第三个和col-lg-6的div。我希望第三个div始终低于div 1，即使div 3变大 我当前的代码： <div class="row"> <div class="col-sm-12 col-lg-6"> <div class="panel panel-default">
<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>
托沃根
-
-
-
-
-
-
-
分类
选择者
分类
产品
安塔尔
沃格
脚趾！
宣传：
安塔尔：
沃格
脚趾！
斯特尔·阿蒂克尔：
安塔尔：
沃格
脚趾！
T4:
安塔尔：
沃格
脚趾！
小工具：
安塔尔：
沃格
脚趾！
代码
OMSCHRIJING
安塔尔：
普里斯
沃格
脚趾！
分类
选择者
分类
产品
安塔尔
沃格
脚趾！
供应商：
托塔尔：
奥维齐赫滕
代码
贝什里金
普里斯
<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>
clear: both;