HTML 테이블의 이미지를 오른쪽 정렬하는 방법

Question

<p>Django 웹사이트를 만들었고 상단에 작은 형식처럼 결과를 표시하고 싶습니다. 왼쪽에 테이블이 있는데 오른쪽 테이블에 두 장의 사진과 또 다른 열을 추가하고 싶습니다. 더 잘 설명하기 위해 다이어그램을 디자인했습니다. 여기에 이미지 설명을 입력하세요</p> <p>이제 Form 1과 테이블에 대한 코드를 작성했습니다. 백엔드 코드도 작성합니다. 이미지와 양식 2가 양식의 오른쪽에 있으므로 HTML 코드를 작성하는 방법을 알고 싶습니다. HTML 코드를 작성하면 표 아래에 표시됩니다. 누구든지 테이블 오른쪽에 그림과 양식 2를 추가하는 데 도움을 줄 수 있습니까? </p> <p>현재 HTML 코드는-</p> <pre class="brush:php;toolbar:false;">*{% 확장 'login/basic.html' %} {% 블록 제목 %}개수 승인{% 엔드블록 제목 %} {% 블록 본문 %} <!-- <div class="컨테이너 my-5 px-2" --> <form action="/approval" method="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="날짜">날짜</label> <입력 유형="날짜" id="날짜" 이름="날짜"> </div> <label class="form-group mx-5 my-3" for="servers">에서 서버를 선택하세요 - {{serverLst}}</label> <div class="form-group mx-5 my-3"> <이름 선택="서버 이름" id="forserver" 크기="4" 배수> {serverLst %의 서버에 대한 %} <옵션 값="{{서버}}">{{서버}}</option> {% 종료: %} </선택> </div> <버튼 유형="제출" class="btn btn-primary mx-5 my-3">제출 </div> </div> --> <div class="row g-2"> <div class="col-md"> <div class="form-floating"> <입력 유형="날짜" class="양식 제어" id="floatingInputGrid"; 이름="날짜"> <label for="floatingInputGrid">교대 날짜</label> </div> </div> <div class="col-md"> <div class="form-floating"> <이름 선택="서버 이름" class="양식 선택" id="floatingSelectGrid"> <옵션이 선택됨>서버 이름</option> {serverLst %의 서버에 대한 %} <옵션 값="{{서버}}">{{서버}}</option> {% 종료: %} </선택> <label for="floatingSelectGrid">서버 선택</label> </div> </div> <div class="col-md"> <div class="form-floating"> <버튼 유형="제출" class="btn btn-primary mx-5 my-2" id="floatingInputGrid">제출</button> </div> </div> </div> </양식> <!-- 테이블 --> <테이블 클래스="테이블" style="너비:25%"> <머리> <tr> <번째 범위="col">사용자 이름</th> <번째 범위="col">시작</th> <번째 범위="col">Ending</th> <번째 범위="col">보너스</th> </tr> </머리> <본문> <tr> <번째 범위="행">1</th> <td>마크</td> <td>오토</td> <td>@mdo</td> </tr> <tr> <번째 범위="행">2</th> <td>야곱</td> <td>손튼</td> <td>@fat</td> </tr> <tr> <번째 범위="행">3</th> <td colspan="2">새 래리</td> <td>@트위터</td> </tr> </tbody> </테이블> <!-- </div> --> {% 엔드블록 %}</pre>

</ul> <p>任何改进我的html代码的建议道将不常有帮助，如果有任何html错误，请忽略。</p>

Answer 1

CSS 속성, 특히 위치:절대 또는 위치:고정을 사용해 보세요. 'https://sbgsdjango.herokuapp.com/English', 이 웹사이트는 여러분을 위한 데모이므로 필요하지 않습니다