要素を下の隅に浮かびます-CSSチュートリアル-php.cn

要素を下の隅に浮かびます

テキストがそれを包むように、右または左に要素をレイアウトする必要がありますか？それはフロートプロパティにとって簡単な作業です。しかし、私たちがその要素（それを画像と呼んでみましょう）を底の角の1つにプッシュしたい場合はどうでしょうか。少し注意が必要ですよね？おそらくJavaScriptが必要ですか？

いいえ、（トリッキーな）CSSの数行はそれを行うことができます！サイズとコンテンツに関係なく、画像を下隅に固執するCSSのみのソリューションを次に示します。

ラッパー要素をサイズ化し、職場で魔法を見てください：

コードを分析しましょう。

マークアップとレイアウト

すべてを含めるにはラッパー要素が必要であり、FlexBoxを使用します。 FlexBoxを使用すると、デフォルトのストレッチアライメントに依存して、後で高さ100％を使用できるようになります。

 <div>
  <div>
    <div> <img  alt="要素を下の隅に浮かびます" > </div>
    ロレム・イプサム・ドロール...
  </div>
</div>

ログイン後にコピー

 .wrapper {
  ディスプレイ：Flex;
}

.float {
  フロート：そうです;
  高さ：100％;
  ディスプレイ：Flex;
  Align-Items：Flex-End;
  Shape -Outside：Inset（Calc（100％-100px）0 0）;
}

ログイン後にコピー

.wrapper内の.boxはフレックスアイテムです。ボックスに適用される特定のCSSは必要ありません。ラッパーの高さを定義し、同時に同じ高さに伸びます。この動作により、子要素が使用できる「参照の高さ」が得られます。

仕様から：

フレックスアイテムが自己整列にある場合：ストレッチの内容のレイアウトをやり直し、この使用済みサイズを明確なクロスサイズとして扱い、パーセンテージサイズの子供を解決できるようにします。

キーワードは、ボックス要素内の高さ（％）の高さを安全に使用できるようにする明確なものです。

フローリングされた要素のために

.float要素は、上記で詳述した高さの計算のおかげで、テキストコンテンツの隣に高さ全体を取ります。この要素の内部では、FlexBoxアライメントを使用して画像を下に押します。

今、本当のトリックのために、Shape-Outsideプロパティを使用してください。 MDNがそれを定義する方法は次のとおりです。

Shape-Outside CSSプロパティは、隣接するインラインコンテンツをラップする順に、形状（非長方形である可能性がある）を定義します。デフォルトでは、インラインコンテンツはマージンボックスをラップします。 Shape-Outsideは、このラッピングをカスタマイズする方法を提供し、単純なボックスではなく複雑なオブジェクトにテキストをラップすることができます。

言い換えれば、Shape-Outsideは、コンテンツが要素の境界ボックスの周りに流れる方法を設定します。

多くの値が必要です。それらの1つは、MDNによると、挿入（）関数です。

挿入図の長方形を定義します。最初の4つの引数がすべて提供されると、それらは、挿入図長方形のエッジの位置を定義する参照ボックスからの上部、右、下、左のオフセットを内向きに表します。

したがって、Shape -Outside：Inset（calc（100％-x）0 0）を使用して、画像の上部から正確に始まるインセット長方形を作成できます。上部は100％-Xに等しく、xは画像の高さで、100％は.float要素の高さです。これにより、テキストは画像の上部にある空きスペースに包むことができます。これは応答性が高く、さらに左右を簡単に切り替えることができます（フロートプロパティを調整することで）

それでおしまい！唯一の主要な警告は、画像の高さを知る必要があることです。

マークアップを最適化しましょう

コードを少し最適化し、画像の周りに余分なラッパーを削除することができます。

 <div>
  <div>
    <img  alt="要素を下の隅に浮かびます" >
    ロレム・イプサム・ドロール...
  </div>
</div>

ログイン後にコピー

その後、私たちのCSSはなります

.wrapper {
  ディスプレイ：Flex;
}

.float {
  フロート：そうです;
  高さ：100％;
  幅：100px;
  Shape -Outside：Inset（calc（100％-100px / *height * /）0 0）;
  オブジェクトフィット：conter;
  オブジェクトポジション：ボトム;
}

ログイン後にコピー

余分なラッパーを削除したので、画像を一番下の隅に配置するための別の手法が必要です。このために、オブジェクトフィットとオブジェクトポジションを使用していますが、画像の幅を明示的に指定する必要があります。

この方法を使用すると、高さのみが必要な前のコードとは異なり、画像の幅と高さの両方を知る必要があります。

もっと欲しい？

この概念をさらに拡張して、よりファンシーな状況を説明できます。たとえば、画像を右に浮かせることができますが、justify -content：center：calc（100％-x）0 0）から挿入図（Calc（50％-x/2）0 0）にシェイプアウトサイドを変更することで、インセットの長方形を中央に調整します。

また、両方のボトムコーナーに2つの画像を浮かせることもできます。

ここで複雑なものはありません。私は同じフローティング要素を2回、右に1回、左側に再び使用しています。そして、なぜ4つの角に画像を配置できるのに、なぜ2つの角で止まるのですか：

同じ基本的なアイデアがここにありますが、上部の画像の一般的なフロート機能にも依存しています。ただし、これがコンセプトが少し分解され始める場所であることに気付き、含まれるボックスのサイズに応じて不要なオーバーフローが得られます。 .float要素の高さを100％を超えて、画像のパディングとマージンを調整することで滑らかにする「魔法の数字」を適用できます。

Shape-OutsideがRadial-Gradient（）を値として受け入れることをご存知ですか？それを使用して、以下のような丸い画像を配置できます。

勾配の透明な部分は、テキストが移動できる自由空間です。あなたは、私たちがイメージにも国境帯域を適用したことに気づいたかもしれません。 Shape-Outsideプロパティは、.Float Elementに単純に影響し、画像の形状を手動で調整して、Shape-Outsideで定義された形状に従う必要があります。

私たちがそれに取り組んでいる間、これをjustify-content：center：center：を使用して、画像をボックスの垂直中心にピンする以前の例と組み合わせてみましょう。

別の放射状勾配（）およびまた、別の国境とラジウスの構成。

代わりに線形勾配（）を使用して、ラッピングエリアに三角形の形状を作成できました。

これは、radial-gradient（）に使用したのと同じ考えです。大きな違いは、イメージをカットするためにボーダーラジウスの代わりにクリップパスを使用していることです。

そして、私たちは他の人のためにそれをしたので、justify-content：センターのアイデアを使用して、画像を箱の右端の垂直中心に固定します。

上記のデモでconic-gradient（）を使用して、形状アウトサイドを使用して三角形とクリップパスを定義して画像に似た形状を取得します

これらの例はすべて、画像が装飾的である場合（SEOの目的のためにHTML内で必要とされていない場合）、より少ないコードを使用して最適化できます。 .float要素を擬似要素に置き換えて、代わりに画像を背景として適用しましょう。

マスクを使用して、必要な画像の部分だけを表示し、Shape-Outsideと同じ値を使用しています。したがって、私たちがしなければならなかったのは、形状の1つの値を定義することだけです。