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

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 を応援していただければ幸いです。

<<:  elasticsearchを使用してインデックスデータを定期的に削除する

>>:  ウェブデザインにおけるポップアップウィンドウとフローティングレイヤーのデザイン

推薦する

Dockerを使用してSpringBootプロジェクトをデプロイする方法

Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...

操作例 MySQL ショートリンク

MySQL ショートリンクの設定方法1. mysql 接続番号ステートメントコマンドを確認します。 ...

いくつかのMySQL更新操作のケース分析

目次ケーススタディアカウント残高を更新する直接更新楽観的ロック方式ロックフリーソリューションキューイ...

MySQL での実行計画の explain コマンド例の詳細な説明

序文explain コマンドは、クエリ オプティマイザーがクエリの実行を決定した方法を確認する主な方...

jQueryはhide()とtoggle()関数を使用してカメラブランド表示の非表示機能を実現します。

最近、jQuery を学習しているときに、show()、hide()、toggle() 関数に出会い...

JavaScript ES6 分割演算子の理解と応用

目次序文脱構築記号の役割使い方分割割り当ての適用アプリケーションの簡単な紹介JSONデータを抽出する...

MySQLを水平から垂直に、垂直から水平に変換する方法

データの初期化 `test_01` が存在する場合はテーブルを削除します。 テーブル「test_01...

一定期間の日ごと、時間ごとの統計データを取得するMySQLの詳しい説明

毎日の統計情報を取得するプロジェクトを実行する際、プロジェクト ログを分析する必要があります。要件の...

VirtualBox CentOS7.7.1908 Python3.8 ビルド Scrapy 開発環境 [グラフィックチュートリアル]

目次環境CentOSをインストールするyum 国内ミラーソースを構成するサードパーティの依存関係をイ...

nginx で gzip 圧縮を実装してウェブサイトの速度を向上させる方法

目次gzip 圧縮を使用する理由は何ですか? nginxはgzipを実装するgzip処理nginx ...

一般的なSQL削除ステートメントの原則の違いを理解するだけです

この記事では主に、SQL 削除ステートメント DROP、TRUNCATE、および DELETE の違...

JavaScript のドキュメント オブジェクト モデル (DOM)

目次1. DOMとは何か2. 要素を選択する3. getElementById() 4. クエリセレ...

Nginx ドメイン転送の使用シナリオ コード例

シナリオ 1: サーバーの制限により、外部に開かれているポートは 1 つだけですが、別の外部ネットワ...

Vue イベントの $event パラメータ = イベント値の場合

テンプレート <el-table :data="データリスト"> &...

MySQL 5.7 MGR シングルマスター決定マスターノード方式の詳細説明

当銀行のMGRは年末に開始されます。公式文書を読んだり、毎日テストを受けたりしなければなりません。毎...