フローティング機能を使用して画像の周囲にテキストを配置する

画像を左側にフローティングし、その下のテキストをその周りに折り返すように実装するには、次のようにします。

1. テキスト要素に重ねる画像を選択する
2. スタイルパネル内のレイアウト設定にアクセスする
3. 左フロートオプションを選択
4. 組み込む パディング 画像の境界線と周囲のコンテンツの間のスペースを右と下に配置します

画像を右揃えにする場合は、スペースを確保するために左と下のパディングを忘れずに組み込んでください。

囲んでいる要素をクリアする

ラップされたコンポーネントの明確な可視性を確立するには:

1. フロートコンポーネントの下の要素を選択する
2. スタイルパネル内のレイアウト設定にアクセスする
3. 希望するクリア設定を選択する

フローティングによるテーラードコラムの構築

フロートを使用すると、要素を並べて配置し、列セクションなどの親コンテナーの幅全体を占めることができます。フロートを使用してカスタマイズされた列を作成するには、次の手順を実行します。 

1. キャンバスにdivブロックを組み込むと、これがエンベロープになります。
2. エンベロープ内に3つのdivブロックを追加する
3. 最近追加された3つのdivブロックの1つにクラスを導入する
4. 幅を33.33%に固定し、フロートを左に設定します
5. 残りの2つのdivブロックに同じクラスを適用します。

同様に、フロートを使用して、親コンテナー内で要素を左または右に移動することもできます。この方法は、上記の画像をフローティングする場合に説明した方法と同じです。

Flexbox は、前述のすべてのレイアウト責任をより便利かつ効率的に処理できます。 flexbox の採用について詳しくご覧ください。

‍