ホームページ >ウェブフロントエンド >htmlチュートリアル >アダプティブ内部要素_html/css_WEB-ITnose

アダプティブ内部要素_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:46:351075ブラウズ

デザイン シーン


  • 要素に固定の高さを指定しない場合、要素はそのコンテンツの高さに基づいて調整されます。 width も同様の動作をすることを願っています

アプリケーション シナリオ


実際のアプリケーション シナリオを示すために画像を使用します:

perfect.png

分析:

  • 幅は 外部要因 ではなく、内部要因によって決定されます
  • 水平方向のセンタリング

昔ながらのソリューション


  • コード構造

    <p>文本</p><figure>  <img src="" alt="" width="" height="" />  <figcaption>标题/描述</figcaption></figure><p>文本</P>
  • 正しい幅を取得し、Figure 要素をフロートさせましたが、それによって新たな問題が発生し、全体のレイアウト モードが変更されました

float.png

  • Figure 要素に display: inline-block を適用して、内容に基づいてサイズを決定できるようにします。これにより、正しい幅を実現できますが、水平方向に中央揃え上記の実装は少し面倒です。text-align: cener 属性を親要素に適用し、次に text-align: left 属性
inline-block.png

新しいスタイルのソリューション


説明:
figure {    max-width: 502px;    max-width: min-content;    margin: 20px auto;}figure > img {    max-width: inherit;}

    min-content
  • 属性。このコンテナ内の最大の分割不可能な要素 (固定幅の最も幅の広い単語、画像、または要素) の幅を取得します。 )、ここで非常に重要な役割を果たします 関数 ブラウザ互換性のためのフォールバック スタイルを作成します
《CSS SECRETS》

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。