ここで問題が発生しました。Web サイトの右側にボックスを配置しようとしていますが、なぜ機能しないのかわかりません。justify-content:flex-end; を使用してボックスを揃えようとしました。ページの「最後」にpadding-rightを200pxに追加しましたが、残念ながらこれは機能しませんでした。説明にご協力いただければ幸いです。 *{マージン:0;パディング:0;ボックスサイズ:ボーダーボックス;}.container{幅:100

ウェブサイトボックスを右側に配置する方法-PHP中国語ネットワークQ&A

に質問

ウェブサイトボックスを右側に配置する方法

P粉953231781 2023-08-14 19:16:04 表示＃ヒョウジ＃ 784

CSS3

<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>

Your Answer

提出する

1 件の回答

最初に、display:flex を設定していませんが、flex プロパティを使用します;

次に、div を右に移動します (ボックスなど): (必要に応じてインデントします)

リーリー

2023-08-15 18:21:28

提出する