Richten Sie 2 Karten in DIV vertikal aus, um CSS zu materialisieren
R_life_R
Ich habe das folgende Formular und die folgende Tabelle, die in 2 Spalten nebeneinander stehen, wie hier gezeigt:
Diese Form/Tabelle basiert auf datatable + materialize CSS.
Ich möchte das Formular und die Tabelle in einem div haben und sicherstellen, dass die Unterseite der Tabelle und des Formulars immer ausgerichtet ist.
Ich suchte herum, ohne eine Lösung.
Hier geht mein Code:
<div class="divider"></div>
<!--Basic Form-->
<div id="basic-form" class="section">
<div class="row">
<div class="col s12 m4 l4">
<div class="card-panel">
<h4 class="header2">Add or Modify</h4>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s2">
<input type="number" id="id" name="id" class="form-control" placeholder="Id" />
<label for="id">Id</label>
</div>
<div class="input-field col s10">
<?php
//// function populate ($sql, $class,$name, $id, $title, $value,$option)
echo populate ("SELECT * FROM product_family order by product_type_id ASC","form-control","nm","nm","Select Product", "product_family", "product_family");?>
<label for="nm">Product</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input type="number" step=".01" placeholder="0.00" id="em" name="em" class="form-control" />
<label for="em">Win</label>
</div>
<div class="input-field col s6">
<input type="number" step=".01" id="hp" name="hp" class="form-control" placeholder="0.00"/>
<label for="message">Drop</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<?php
//// function populate ($sql, $class,$name, $id, $title, $value,$option)
echo populate ("SELECT * FROM currency order by id ASC","form-control","ad","ad","Select Currency", "currency", "currency");?>
<label for="ad">Currency</label>
</div>
<div class="row">
<div class="input-field col s12">
<button type="button" id="save" class="btn btn-primary" onclick="saveData()">Save</button>
<button type="button" id="update" class="btn btn-warning" onclick="updateData()">Update</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Form with placeholder -->
<div class="col s12 m8 l8">
<div class="card-panel">
<h4 class="header2">Products In DB</h4>
<div class="row">
<table id="table1" class="table table-bordered table-striped table-hover display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th width="20">ID</th>
<th>Product</th>
<th>Win</th>
<th>Drop</th>
<th width="100">Currency</th>
<th width="100">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Sonja
Fügen Sie den CSS-Code hinzu, der zur Lösung des Problems beiträgt:
.section .row {
display: flex;
display: -webkit-flex;
display: -moz-flex;
word-break: break-word;
}
.section .card-panel {
height: 100%;
}