<p>Django Web サイトを作成し、結果を上部に小さなフォームのように表示したいと考えています。左側にテーブルがあり、右側のテーブルに 2 つの写真と別の列を追加したいと考えています。よりわかりやすく説明するために図を作成しました -
ここに画像の説明を入力してください</p>
<p>これで、フォーム 1 とテーブルのコードが作成されました。バックエンドのコードも書きます。画像とフォーム2はフォームの右側にあるのでhtmlコードの書き方を知りたいです。任意の HTML コードを記述するだけで、表の下に表示されます。誰かが表の右側に写真とフォーム 2 を追加するのを手伝ってくれませんか? </p>
<p>現在の HTML コードは -</p>
<pre class="brush:php;toolbar:false;">*{% extends 'login/basic.html' %}
{% ブロック タイトル %}カウントの承認{% エンドブロック タイトル %}
{% ブロック本体 %}
<!-- <div class="container my-5 px-2"> -->
<フォームアクション="/approval"メソッド="post">{% csrf_token %}
<!-- <div class="コンテナ" >
<div class="form-group mx-5 my-3"""
<div class="form-group mx-5 my-3"""
<label class="my-3" for="date">日付</label>
<input type="date" id="date" name="date">
</div>
<label class="form-group mx-5 my-3" for="servers">次からサーバーを選択します - {{serverLst}}</label>
<div class="form-group mx-5 my-3"""
<select name="serverName" id="forserver" size="4" multiple>
{serverLst のサーバーの%}
<オプション値="{{サーバー}}">{{サーバー}}</オプション>
{% 終了の %}
</選択>
</div>
<button type="submit" class="btn btn-primary mx-5 my-3">Submit</button>
</div>
</div> -->
<div class="行 g-2">
<div class="col-md">
<div class="フォームフローティング">
<入力タイプ="日付"クラス= "フォームコントロール" id="floatingInputGrid"名前="日付">
<label for="floatingInputGrid">シフト日</label>
</div>
</div>
<div class="col-md">
<div class="フォームフローティング">
<名前を選択="サーバー名"クラス= "フォーム選択" id="floatingSelectGrid">
<選択されたオプション>サーバー名</option>
{serverLst のサーバーの%}
<オプション値="{{サーバー}}">{{サーバー}}</オプション>
{% 終了の %}
</選択>
<label for="floatingSelectGrid">サーバーを選択</label>
</div>
</div>
<div class="col-md">
<div class="フォームフローティング">
<ボタンの種類=「送信」 class="btn btn-primary mx-5 my-2" id="floatingInputGrid">送信</button>
</div>
</div>
</div>
</フォーム>
<!-- テーブル -->
<テーブルクラス="テーブル" style="幅:25%">
<頭>
<tr>
<thscope="col">ユーザー名</th>
開始
終了
ボーナス
</tr>
</頭>
<みんな>
<tr>
<thscope="row">1</th>
<td>マーク</td>
<td>オットー</td>
<td>@mdo</td>
</tr>
<tr>
<th スコープ = "行" >2
<td>ジェイコブ</td>
<td>ソーントン</td>
<td>@fat</td>
</tr>
<tr>
<th スコープ = "行" >3
<tdcolspan="2">ラリー・ザ・バード</td>
<td>@twitter</td>
</tr>
</tbody>
</テーブル>
<!-- </div> -->
{% エンドブロック %}</pre>
<li></li>
</ul>
<p>HTML コードを変更した場合は、HTML の概要を参照すると非常に役立ちます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS プロパティ、具体的にはposition:absoluteまたはposition:fixedを使用してみてください。 「https://sbgsdjango.herokuapp.com/English」、この Web サイトはデモです。
は必要ありません