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を使用してインデックスデータを定期的に削除する

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

推薦する

vuex の補助関数 mapGetters の基本的な使い方の詳細な説明

mapGettersヘルパー関数mapGettersヘルパー関数は、ストア内のゲッターをローカルの計...

Nginx のパラメータをオンにして Web パフォーマンスを 3 倍向上させる方法

1. 遭遇したいくつかの問題2008 年にパフォーマンス テストを行っていたとき、パフォーマンス テ...

ウェブ音楽プレーヤーを実現する js

この記事では、参考までに簡単なHTMLと音楽プレーヤーの制作コードを紹介します。具体的な内容は以下の...

SQL 実践演習: オンライン モール データベースの製品カテゴリ データ操作

オンラインショッピングモールデータベース - 商品カテゴリデータ操作(I)プロジェクトの説明電子商取...

MySQL 圧縮の使用シナリオとソリューション

導入圧縮トランスポート プロトコル、圧縮列ソリューション、圧縮テーブル ソリューションなど、MySQ...

bashコマンドの使い方の詳細な説明

Linux では、基本的に vi エディタのように「.sh」拡張子を持つテキストの処理と実行を記述す...

MySQL 完全折りたたみクエリ正規マッチングの詳細な説明

概要前の章では、クエリのフィルター条件について学習しました。MySQL では、like % ワイルド...

HTTP サーバーとクライアントのやり取りをシミュレートする Node.js+postman

目次1. NodeがHTTPサーバーを構築する2. HTTPサーバーがリクエストを取得する1. Po...

CSS 疑似クラス: 空っぽだと光る (サンプルコード)

最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その...

CentOS7.x のアンインストールとインストール MySQL5.7 の操作手順とエンコード形式の変更方法

1. MySQL 5.7 のアンインストール1.1查看yum是否安裝過mysql CD yum li...

Mysql論理アーキテクチャの詳細な説明

1. 全体的なアーキテクチャ図他のデータベースと比較すると、MySQL は、そのアーキテクチャがさま...

nginx の 2 つのモジュールの proxy_pass の違い

1. 1.ngx_stream_proxy_moduleモジュールのproxy_passディレクティ...

Vue3 でモバイル ログインおよび登録モジュールをエレガントに実装する方法

目次序文入力ボックスコンポーネントレイアウトvモデルデータ検証ルール設計形状サブコンポーネントは検証...

MySQL デュアルマシン ホットスタンバイ実装ソリューション [テスト可能]

目次1. コンセプト2. 環境の説明3. マスタースレーブホットスタンバイ実装1. コンセプト1. ...

Mysql の一時テーブルとパーティションテーブルの違いの詳細な説明

一時テーブルとメモリテーブルメモリ テーブルとは、メモリ エンジンを使用するテーブルを指します。テー...