ホームページ > 記事 > ウェブフロントエンド > CSS は画像の周りでテキストを折り返す効果を実現します

CSS は画像の周りでテキストを折り返す効果を実現します

不言オリジナル: 2018-06-26 10:19:447453ブラウズ

この記事では、主に CSS テキストラッピング画像で発生する問題と解決策を詳しく紹介します。興味のある友人は参照してください

テキストラッピング画像効果を実現する CSS

、Word でテキストラッピング画像 を正しく実行します。をクリックしてプロパティを調整します。ただし、HTML ドキュメントには直接的な属性はありません。したがって、CSS を使用してこの効果を実現できます。

まず、画像を左揃えにする必要がある場合は左に設定し、右揃えにする必要がある場合は右に設定します。さらに、必要に応じて画像とテキスト間のスペースを設定することもでき、CSS パディングも適用されます。

例:

<img style="float:left;padding:20px 20px 20px 20px;" src="/Upic.jpg">

この画像識別ステートメントをページ上のテキストの中央に挿入すればOKです。

(1) テキストラッピング画像の例

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字环绕</title>
<style>
p {   
width:300px;   
border:1px solid green   
}   
img {   
float:left;   
width:120px;   
height:120px   
}    
</style>
</head>
<body>
<p>
<img src="img.gif" alt="图片" />
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p>
</body>
</html>

レンダリング:

(2) CSS テキストラッピング画像の問題と解決策:

1. はじめに

必要です画像をテキストで囲む効果を実現するのは、とても簡単だと思いました。

1) コード部分

<style> .img-left { border: 3px solid #005588; width:300px; } .img-left img { float:left; /* 对图片进行浮动就可以实现了 */ width:150px; } </style> <p> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/>

これは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落です e388a4556c0f65e1904146cc1a846bee6fb279ad3fd4344cbdd93aac6ad173ac 94b3e26ee717c64999d7867364b1b4a3

2) エフェクト画像