Bagaimana untuk menyelaraskan imej dalam jadual HTML

Question

Saya telah membuat tapak web Django dan mahu memaparkan keputusan saya seperti bentuk kecil di bahagian atas. Terdapat meja di sebelah kiri dan saya ingin menambah dua gambar dan satu lagi lajur pada jadual di sebelah kanan. Saya telah mereka gambar rajah untuk menerangkan dengan lebih baik - Masukkan penerangan imej di sini

Sekarang saya telah menulis kod untuk Tingkatan 1 dan jadual. Saya juga menulis kod hujung belakang. Saya ingin tahu cara menulis kod html untuk imej dan borang 2 kerana ia berada di sebelah kanan borang. Tulis sebarang kod html dan ia akan muncul di bawah jadual. Bolehkah sesiapa membantu menambah gambar dan tingkatan 2 di sebelah kanan meja?

Kod html semasa saya ialah-

*{% memanjangkan 'login/basic.html' %}
{% block title %}Kelulusan kiraan{% endblock title %}
{% blok badan %}

<!-- <div class="kontena my-5 px-2">
<form action="/approval" method="post">{% csrf_token %}
    <!-- <div class="bekas"
            <div class="form-group mx-5 my-3">

                <div class="form-group mx-5 my-3">
                    <kelas label="my-3" untuk="tarikh">Tarikh</label>
                    <jenis input="tarikh"id="tarikh"nama="tarikh">
                </div>

                <kelas label="kumpulan bentuk mx-5 my-3"untuk="pelayan">Pilih pelayan daripada - {{serverLst}}</label>
                <div class="form-group mx-5 my-3">
                    <pilih nama="serverName" id="untuk pelayan"
                        {% untuk pelayan dalam serverLst %}
                        <nilai pilihan="{{pelayan}}">{{pelayan}}</option>
                        {% endfor %}
                    </select>
                </div>
                <jenis butang="serah"kelas="btn btn-utama mx-5 my-3">Serah</button>
            </div>

        </div> -->

    <div class="baris g-2">
        <div class="col-md">
            <div class="bentuk-terapung">
                <jenis input="tarikh" class="kawalan bentuk" id="floatingInputGrid" nama="tarikh">
                <label untuk="floatingInputGrid">Tarikh Anjakan</label>
            </div>
        </div>
        <div class="col-md">
            <div class="bentuk-terapung">
                <select name="serverName" class="pilih bentuk" id="floatingSelectGrid">
                    <pilihan dipilih>Nama Pelayan</option>
                    {% untuk pelayan dalam serverLst %}
                    <nilai pilihan="{{pelayan}}">{{pelayan}}</option>
                    {% endfor %}
                </select>
                <label untuk="floatingSelectGrid">Pilih pelayan anda</label>
            </div>
        </div>
        <div class="col-md">
            <div class="bentuk-terapung">
                <jenis butang="serahkan" class="btn btn-primary mx-5 my-2" id="floatingInputGrid">Serah</button>
            </div>
        </div>
    </div>
</form>

<!-- jadual -->

<kelas meja="meja" style="lebar:25%">
    <kepala>
        <tr>
            <skop ke="col">Nama pengguna</th>
            <skop ke="col">Bermula</th>
            <skop ke="col">Berakhir</th>
            <skop ke="col">Bonus</th>
        </tr>
    </kepala>
    <tbody>
        <tr>
            <skop ke="baris">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <skop ke="baris">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <skop ke="baris">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

<!-- </div> -->
{% endblock %}

任何改进我的html代码的建议都将非常有帮助，如果有任何html错误，请忽略。<

Answer 1

Cuba gunakan sifat CSS, khususnya position:absolute atau position:fixed. 'https://sbgsdjango.herokuapp.com/English', laman web ini adalah demo untuk anda, tidak perlu