简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ウェブサイトボックスを右側に配置する方法
P粉953231781
P粉953231781 2023-08-14 19:16:04
0
1
635
<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>
P粉953231781
P粉953231781

全員に返信(1)
P粉373990857
P粉3739908572023-08-15 18:21:28 1棟

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

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

リーリー
いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！