웹사이트 상자를 오른쪽에 배치하는 방법
<p>여기에 문제가 있습니다. 웹사이트 오른쪽에 상자를 넣으려고 하는데 왜 작동하지 않는지 모르겠습니다. <code>justify-content를 사용하려고 합니다. : flex-end;< /code>상자를 페이지의 "끝"에 정렬한 다음 <code>200px</code>에 <code>padding-right</code>를 추가합니다. 작동하지 않습니다. 설명에 도움을 주시면 대단히 감사하겠습니다.</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">* {
여백: 0;
패딩: 0;
상자 크기 조정: 테두리 상자;
}
.컨테이너 {
너비: 100%;
높이: 50vh;
배경색: #1f2937;
위치: 정적;
디스플레이: 플렉스;
플렉스 방향: 열;
내용 정당화: 센터;
}
.바닥글 {
위치: 절대;
하단: 0px;
너비: 100%;
높이: 10vh;
배경색: #1f2937;
색상: 흰색;
텍스트 정렬: 중앙;
디스플레이: 플렉스;
내용 정당화: 센터;
항목 정렬: 중앙;
}
.로고 {
글꼴 크기: 24px;
글꼴 계열: 'Times New Roman', Times, serif;
색상: 흰색;
내용 정당화: 공백 사이;
패딩 상단: 15px;
글꼴 모음: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
왼쪽 패딩: 200px;
위치: 절대;
상단: 0;
}
.navbar {
색상: 흰색;
글꼴 크기: 18px;
위치: 고정;
너비: 85%;
상단: 0;
오른쪽: 0;
여백: 자동;
디스플레이: 플렉스;
항목 정렬: 중앙;
내용 정당화: flex-end;
플렉스 방향: 행;
패딩 상단: 15px;
오른쪽 패딩: 200px;
}
.navbar ul li {
목록 스타일: 없음;
디스플레이: 인라인 블록;
여백: 0 20px;
텍스트 장식: 없음;
}
.텍스트 1 {
위치: 상대;
색상: 흰색;
왼쪽 패딩: 200px;
글꼴 크기: 48px;
글꼴 두께: 굵게;
너비: 720px;
}
.text2{
색상: 흰색;
글꼴 크기: 18px;
왼쪽 패딩: 200px;
너비: 520px;
}
.text3{
텍스트 정렬: 중앙;
디스플레이:플렉스;
항목 정렬:가운데; /*세로 중심*/
내용 정당화:오른쪽; /*가로 중심*/
너비: 500px;
높이:350px;
배경색: 회색;
}
</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>웹사이트</title>
<link href="style.css" rel="stylesheet">
</머리>
<본문>
<div class="컨테이너">
<div class="로고">
<h2>헤더 로고</h2>
</div>
<div class="navbar">
<li><a href="index.html">헤더 링크 1</a></li>
<li><a href="index.html">헤더 링크 2</a></li>
<li><a href="index.html">헤더 링크 3</a></li>
</ul>
</div>
<div class="text1">
<h2>이 웹사이트는 정말 멋집니다</h2>
</div>
<div class="text2">이 웹사이트에는 기본 제목 아래에 표시되는 하위 텍스트가 있습니다. 글꼴이 더 작고 색상 대비가 낮습니다.</div>
<div class="text3">이것은 이미지의 자리표시자입니다</div>
</div>
<div class="footer">
저작권 &복사; 오딘 프로젝트 2023
</div>
</body>
</html></pre>
<p><br /></p>
<p>정렬하기 위해 justify-content:flex-end를 사용해 보았으나 도저히 이해가 되지 않습니다. 솔직히 말해서 내 문제에 대한 설명이 도움이 될 것입니다. 필요한 CSS 코드와 전체 HTML만 포함시켰습니다. 파일 . 모든 도움에 미리 감사드립니다! </p>
