CSS を使用して画像上でテキストの折り返し効果を実現する-CSSチュートリアル-php.cn

CSS を使用して画像上でテキストの折り返し効果を実現する

高洛峰

リリース： 2017-03-13 17:39:09

オリジナル

2079 人が閲覧しました

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

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

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

最初に float のパラメータを設定します。画像を左揃えにする必要がある場合は left に設定し、右揃えにする必要がある場合は right に設定します。また、必要に応じて画像とテキスト間のスペースを設定することもでき、CSSのpaddingも適用できます。

例:

コードは次のとおりです:

<img    style="max-width:90%" src="/UCSS を使用して画像上でテキストの折り返し効果を実現する.jpg" alt="CSS を使用して画像上でテキストの折り返し効果を実現する" >将这一个图片标识语句，插入到页面文字中间，就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）コードのコードは次のとおりです; } .img -left img { float:left; /* 実現するために画像をフローティングします*/ width:150px;

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