CSSはフロートをシミュレートして、画像の左右を囲む中央テキストの効果を実現します。

画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。

エフェクトのCSSコードはここで見ることができます

CSS には float: center のような設定はありませんが、いくつかのトリックで同様の効果をシミュレートできます。

友人からよく「float: left と right はあるのに、なぜ float: center がないのですか?」と聞かれます。私の答えは次のとおりです。

1. text-align: center はインライン要素の中央揃え効果を実現できる

2. テキストを画像の両側に 1 行で折り返します。この効果は、ブラウザで処理するのが非常に困難です。テキストを2列で表示しない限り、それは別の問題です

3. テキストに関しては、float は実際には wrapping と呼ぶべきです。float:left は、「この要素をコンテナーの左側に配置し、その右側のすべてをその周囲にラップする」ことを意味します。この場合、ここで説明している float:center は実際には両側をラップすることであり、コンテナー内の要素の「深さ」をどのように決定するかなど、一連の問題が生じます。

float: center の効果をシミュレートするために、2 つの div を作成してテキストを 2 つの列に分割し、中央揃えの画像を最初の div に書き込みます。

<div id="コンテナ">
  <div id="左列">
    <p><img src=".../01.jpg">京都は本州のほぼ中央に位置しています。皇室が江戸に移る前は…
  </div>
  <div id="右列">
    <p>その結果、京都の保存された遺跡の多くはユネスコの世界遺産に登録されています。
  </div>
</div>

まず、2 つの div 要素 .leftcol と .rightcol を display: table-cell に設定し、コンテナー .container 要素を display: table: に設定します。

div#コンテナ{ 
  表示: テーブル; 
  幅: 80%;
  max-width: 900px; /* コンテナの最大幅 900px */
  マージン: 0 自動;
  行の高さ: 1.5;
}
div#左列、div#右列 { 
  表示: テーブルセル; 
  パディング: 1em;
}
div#コンテナ画像{
  width: 55%; /* 画像の幅は最初の列の div の幅の 55% です */
  高さ: 自動;
}

このように、テキストは表の 2 つの列として表示されます。

画像は、最初の列の左上に、その下部が最初のテキスト行のベースラインに揃えられて表示されます。

次に、画像に float:right を指定すると、画像は最初の div の右側にフロートし、テキストは画像の左側に折り返されます。

これまで、最も伝統的なレイアウト、つまり 2 列のテキスト (そのうちの 1 列にフローティング イメージが含まれる) を実装してきました。

次に、テキストを左右に折り返す効果を実現するために、いくつかのテクニックを使用する必要があります。

最初のステップは、margin-right プロパティを負の値に設定して、画像を一定の距離だけ右に移動することです。

div#コンテナ画像{
  フロート: 右;
  幅: 55%;
  高さ: 自動;
  margin-right: -20%; /* 画像は最初の div の幅の 20% 右に移動します */
  左マージン: 20px;
  下マージン: 20px;
}

margin-left および margin-bottom プロパティは、画像の左と下にテキストを配置して 20 ピクセルの間隔を設定します。

このとき、画像は 2 列目のテキストと重なります。

2 番目のステップは、:before 疑似要素を使用して 2 番目の div に要素を生成することです。この要素にはコンテンツは含まれず、フローティング後にテキストをその周囲に折り返すためだけに使用されます。

div#右列:前{ 
  コンテンツ： " "; 
  フロート: 左; 
  幅: 25%;
  パディング上部: 102%;
}

この疑似要素は左に浮動するように設定されており、その幅と画像が右にシフトされる距離を加えたものが画像の幅とまったく同じになります。

テキストと画像の間にいくらかのスペースができるように、padding-top プロパティは少し大きめに設定されています。

コンテンツのないこの疑似要素に赤い境界線を追加すると、その位置を確認できます。

この空の疑似要素の実際の機能は、画像と重なっているテキストを分離して折り返すことで、右側のテキストが画像を包み込む効果をシミュレートすることですが、実際にはテキストは疑似要素を包み込みます。

この折り返し方法には制限があり、画像は div の上部に配置する必要があり、垂直方向に画像を任意に配置することはできません。

最後に、美化スタイルと適応コードをいくつか設定すると、最終的な効果が実現されます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。