CSS は画像の周りでテキストを折り返す効果を実現します-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

不言

Jun 26, 2018 am 10:19 AM

この記事では、主に 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"/>

ログイン後にコピー

これは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落ですこれは中国語の段落です

< /p>

2) エフェクト画像