<p>ここで問題が発生しました。Web サイトの右側にボックスを配置しようとしていますが、なぜ機能しないのかわかりません。<code>justify-content を使用しようとしています: flex-end;< /code>ボックスをページの「末尾」に揃えてから、<code>padding-right</code> を <code>200px</code> に追加しますが、残念ながらこれはそうではありません働かないよ。説明にご協力いただければ幸いです。</p>
<p><br /></p>
<pre class="ブラシ:css;ツールバー:false;">* {
マージン: 0;
パディング: 0;
ボックスのサイズ設定: ボーダーボックス;
}
。容器 {
幅: 100%;
高さ: 50vh;
背景色: #1f2937;
位置: 静的;
ディスプレイ: フレックス;
フレックス方向: 列;
コンテンツの位置揃え: 中央;
}
.フッター {
位置: 絶対;
下: 0px;
幅: 100%;
高さ: 10vh;
背景色: #1f2937;
色: 白;
テキスト整列: 中央;
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
整列項目: 中央;
}
.ロゴ {
フォントサイズ: 24px;
フォントファミリー: 'Times New Roman'、Times、セリフ;
色: 白;
コンテンツの位置揃え: 間のスペース;
パディングトップ: 15px;
フォントファミリー: 'Gill Sans'、'Gill Sans MT'、Calibri、'Trebuchet MS'、サンセリフ;
パディング左: 200px;
位置: 絶対;
トップ: 0;
}
.navbar {
色:白;
フォントサイズ: 18px;
位置: 固定;
幅: 85%;
トップ: 0;
右: 0;
マージン: 自動;
ディスプレイ: フレックス;
整列項目: 中央;
justify-content: フレックスエンド;
フレックス方向: 行;
パディングトップ: 15px;
パディング右: 200px;
}
.navbar ul li {
リストスタイル: なし;
表示: インラインブロック;
マージン: 0 20px;
テキスト装飾: なし。
}
。テキスト 1 {
位置: 相対的;
色: 白;
パディング左: 200px;
フォントサイズ: 48px;
フォントの太さ: 太字;
幅: 720ピクセル;
}
.text2{
色: 白;
フォントサイズ: 18px;
パディング左: 200px;
幅: 520ピクセル;
}
.text3{
テキスト整列: 中央;
ディスプレイ:フレックス;
整列項目:中央; /*垂直中央*/
コンテンツの位置揃え:右; /*水平方向の中心*/
幅: 500ピクセル;
高さ:350ピクセル;
背景色: グレー;
}
</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="ja">
<頭>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>ウェブサイト</title>
<link href="style.css" rel="stylesheet">
</head>
<本体>
<div class="コンテナ">
<div class="ロゴ">
<h2>ヘッダーロゴ</h2>
</div>
<div class="ナビゲーションバー">
<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">この Web サイトには、メイン タイトルの下にサブテキストが含まれています。フォントは小さく、色のコントラストは低くなっています</div>
<div class="text3">これは画像のプレースホルダーです</div>
</div>
<div class="フッター">
Copyright © オーディン プロジェクト 2023
</div>
</ボディ>
</html></pre>
<p><br /></p>
<p>justify-content:flex-end を使用して位置を調整しようとしましたが、途方に暮れています。正直に言うと、私の問題の説明が非常に役立つでしょう。必要な CSS コードと HTML 全体を含めただけです。ファイル 。ご協力をよろしくお願いいたします。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
最初に、display:flex を設定していませんが、flex プロパティを使用します;
次に、div を右に移動します (ボックスなど): (必要に応じてインデントします)
リーリー