chinesemature老熟妇高潮,国产9 9在线

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Flexbox での畫(huà)像の位置合わせに関する問(wèn)題と課題

P粉068510991 2024-02-26 00:26:26

578

最近開(kāi)発したホームページに取り組んでいますが、フレックスボックス內(nèi)で項(xiàng)目を整列させるのに少し苦労しています。最初のフレックスボックスには 3 つの畫(huà)像が含まれており、すべての畫(huà)像が互いの下の垂直線上にある必要があります。

これは 2 番目のフレックスボックスにとっても重要です。

これは私のコードです:

リーリーリーリー

畫(huà)像の 2 番目の配置に常にギャップが生じます。殘念ながら、この問(wèn)題の解決策はまだ見(jiàn)つかりません。

ヒントや提案、コーディングを改善する方法をいただければ幸いです。

＃＃＃事前にどうもありがとうございました。

＃＃＃敬具、＃＃＃

ルーク

屬性

justifiy-content

と

align-items を使用しようとしましたが、うまくいきません。

P粉068510991

全員に返信(2)

P粉7953113212024-02-26 18:53:18 2棟

このレイアウトを?qū)g裝するには複數(shù)の方法があります。CSS グリッド、フレックスボックス、および複數(shù)列レイアウトはすべて (さまざまな方法で) 機(jī)能します。

ただし、最初にお?jiǎng)幛幛工毪韦?HTML を変更することです。意味的には、プロパティのリストを表示しているように見(jiàn)えますが、リスト (順序付きまたは順序なし) を使用する必要があることがすぐに示唆されます。私は、説明的なテキストと畫(huà)像が存在する必要があることを提案します。図>要素。

このリビジョンでは、

<main> タグ (または <section>、<article>...) でラップすると、上記の HTML は次のようになります:

  アンセア?イモビリアン
  
    
      
        
          
        
        子貓の畫(huà)像を配置: 1
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 2
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 3
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 4
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 5
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 6

複數(shù)列レイアウトで使用し、CSS に説明コメントを追加します:

/* 共通のテーマを提供するために使用される CSS カスタム プロパティ
   複數(shù)の要素に: */
：根 {
  --commonSpacing: 1em;
}

/* デフォルトのマージンを削除するための単純な CSS リセット、
   そしてパディング。すべてのブラウザが確実に使用するようにする
   コンテンツに対して同じサイズ変更アルゴリズムを使用し、
   同じフォント サイズとフォント ファミリーを適用します: */
*、
 ：：前に、
 ：：後 {
  ボックスのサイズ設(shè)定: ボーダーボックス;
  フォントファミリー: システム UI;
  フォントサイズ: 16px;
  マージン: 0;
  パディング: 0;
}

/* 見(jiàn)出しを強(qiáng)調(diào)するには: */
h4 {
  フォントサイズ: 1.8em;
  マージンブロック: calc(0.5 * var(--commonSpacing));
  テキスト整列: 中央;
}

主要 {
  /* インライン軸のサイズを設(shè)定します (英語(yǔ)では幅、
     ラテン語(yǔ)) から 80 ビューポート幅単位まで、最小
     サイズは 30 root-em 単位、最大サイズは 1300 ピクセル: */
  インラインサイズ: クランプ(30rem、80vw、1300px);
  /* インライン軸上の要素を中心に配置します: */
  マージンインライン: 自動(dòng);
}

ウル {
  /* 複數(shù)列レイアウトを使用する、
     2 つの列を確保します: */
  列數(shù): 2;
  /* デフォルトのリストマーカーを削除します: */
  リストスタイルタイプ: なし;
  /*  要素を中央に配置
  以內(nèi) ＃＃＃： */
  テキスト整列: 中央;
}

リ {
  /*  が存在しないことを確認(rèn)します
     その內(nèi)容は複數(shù)の列にまたがり、
     見(jiàn)苦しい孤児たちを置き去りにする
     列の終わりまたは始まり: */
  侵入：避ける。
  /* 要素の間隔を空ける: */
  マージンブロックエンド: var(--commonSpacing);
}


  アンセア?イモビリアン
  
    
      
        
          
        
        子貓の畫(huà)像を配置: 1
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 2
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 3
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 4
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 5
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 6

JS Fiddle の実行例 .

これを行うには、CSS ネットワークを使用することもできます。ネットワークがある限り、その數(shù)字は左から右、そして上から下に流れます。

/* 共通のテーマを提供するために使用される CSS カスタム プロパティ
   複數(shù)の要素に: */
：根 {
  --commonSpacing: 1em;
}


/* デフォルトのマージンを削除するための単純な CSS リセット、
   そしてパディング。すべてのブラウザが確実に使用するようにする
   コンテンツに対して同じサイズ変更アルゴリズムを使用し、
   同じフォント サイズとフォント ファミリーを適用します: */
*、
：：前に、
：：後 {
  ボックスのサイズ設(shè)定: ボーダーボックス;
  フォントファミリー: システム UI;
  フォントサイズ: 16px;
  マージン: 0;
  パディング: 0;
}

主要 {
  /* インライン軸のサイズを設(shè)定します (英語(yǔ)では幅、
     ラテン語(yǔ)) から 80 ビューポート幅単位まで、最小
     サイズは 30 root-em 単位、最大サイズは 1300 ピクセル: */
  インラインサイズ: クランプ(30rem、80vw、1300px);
  /* インライン軸上の要素を中心に配置します: */
  マージンインライン: 自動(dòng);
}


/* 見(jiàn)出しを強(qiáng)調(diào)するには: */
h4 {
  フォントサイズ: 1.8em;
  マージンブロック: calc(0.5 * var(--commonSpacing));
  テキスト整列: 中央;
}

ウル {
  /* グリッド レイアウトを使用します: */
  表示: グリッド;
  /* 隣接する要素の間隔: */
  ギャップ: var(--commonSpacing);
  /* 2 つの列を定義し、それぞれが次の一部を受け取ります
     利用可能なスペース:*/
  グリッド テンプレート列:repeat(2, 1fr);
  リストスタイルタイプ: なし;
  テキスト整列: 中央;
}


  アンセア?イモビリアン
  
    
      
        
          
        
        子貓の畫(huà)像を配置: 1
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 2
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 3
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 4
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 5
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 6

JS Fiddle の実行例 .

さらに、彈性布局を使用します:

/* 共通のテーマを提供するために使用される CSS カスタム プロパティ
   複數(shù)の要素に: */
：根 {
  --commonSpacing: 1em;
}


/* デフォルトのマージンを削除するための単純な CSS リセット、
   そしてパディング。すべてのブラウザが確実に使用するようにする
   コンテンツに対して同じサイズ変更アルゴリズムを使用し、
   同じフォント サイズとフォント ファミリーを適用します: */
*、
：：前に、
：：後 {
  ボックスのサイズ設(shè)定: ボーダーボックス;
  フォントファミリー: システム UI;
  フォントサイズ: 16px;
  マージン: 0;
  パディング: 0;
}

主要 {
  /* インライン軸のサイズを設(shè)定します (英語(yǔ)では幅、
     ラテン語(yǔ)) から 80 ビューポート幅単位まで、最小
     サイズは 30 root-em 単位、最大サイズは 1300 ピクセル: */
  インラインサイズ: クランプ(30rem、80vw、1300px);
  /* インライン軸上の要素を中心に配置します: */
  マージンインライン: 自動(dòng);
}


/* 見(jiàn)出しを強(qiáng)調(diào)するには: */
h4 {
  フォントサイズ: 1.8em;
  マージンブロック: calc(0.5 * var(--commonSpacing));
  テキスト整列: 中央;
}

ウル {
  /* フレックスボックス レイアウトを使用する: */
  ディスプレイ: フレックス;
  /* の省略形:
    フレックス方向: 行;
    フレックスラップ: ラップ; */
  フレックスフロー: 行の折り返し;
  /* 隣接する要素間のギャップを設(shè)定します: */
  ギャップ: var(--commonSpacing);
  /* デフォルトのリストマーカーを削除します: */
  リストスタイルタイプ: なし;
}

リ {
  /*  を拡張して占有することを許可します
     より多くの部屋: */
  フレックスグロー: 1;
  /* 要素のサイズを次のように設(shè)定します。
     親の 45%。フレックスベース
     常にフレックス項(xiàng)目のインライン軸を參照します。
     これは更新することで変更できます。
     親のフレックス方向: */
  フレックスベース: 45%;
  /* 
 內(nèi)のコンテンツを中央揃えにします: */
  テキスト整列: 中央;
}


  アンセア?イモビリアン
  
    
      
        
          
        
        子貓の畫(huà)像を配置: 1
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 2
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 3
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 4
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 5
      
    
    
      
        
          
        
        子貓の畫(huà)像を配置: 6

JS Fiddle の実行例 .

參考文獻(xiàn)：

ボックスのサイズ設(shè)定。
侵入#.
クランプ()。
列數(shù).
CSS 獨(dú)自のプロパティ .
CSS の屬性プロパティ . ＃＃＃＃＃＃＃＃＃畫(huà)面＃＃＃＃＃＃。＃＃＃
フレックスベース.
フレックス方向。
flex-grow.
フレックスフロー。
フレックスラップ。＃＃＃＃＃＃＃＃＃ギャップ＃＃＃＃＃＃。＃＃＃
グリッドテンプレート列 .
インラインサイズ.
リストスタイルタイプ .
マージンブロック。
マージンインライン。＃＃＃＃＃＃＃＃＃繰り返す（）＃＃＃＃＃＃。＃＃＃
text-align.
var().

いいねを押す +0

返信を追加

P粉3478048962024-02-26 14:48:33 1棟

最初のコンテナで h4 を使用しているようです。

この要素を flexcontainer-1 から取得します。

望ましい結(jié)果を達(dá)成するには、これを行う必要があります

＃＃＃。容器 { ディスプレイ: フレックス; ギャップ:10px; } 。アイテム { 高さ: 50ピクセル; 幅: 100ピクセル; 背景色: 青 } 。箱 { ディスプレイ: フレックス; フレックス方向: 列; ギャップ: 10px }

  
    ハウス 1
    
ハウス 2
    
ハウス 3
  
  
    ハウス 4
    
ハウス5
    
ハウス6

いいねを押す +0

返信を追加

人気のトピック

詳細(xì)>