テキストが画像に巻き付かないようにしたい。 margin
を使用せずにこれを行う方法はありますか?
img {
margin-bottom: 2.5em;
}
<strong><img style="float: left;" src="https://www.google.com/images/srpr/logo11w.png" width="100" height="67" />Text here. Text here. Text here. Text here.
<br />Text here. Text here. Text here. Text here. Text here. Text here.
<br />Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.
<br />Text here. Text here.Text here. Text here.Text here. Text here.
テキストを独自のコンテナでラップする必要があります。
<img>
は左にフロートしているため、新しく追加したコンテナでoverflow: hidden
を使用して、テキストを折り返す必要がありません。
ただし、ブロック要素は<strong>
要素の子孫であってはなりません。このタグを再考することをお勧めします。
img {
width:100px;
height:67px;
float:left;
}
div {
overflow:hidden;
}
<article>
<img src="https://www.google.com/images/srpr/logo11w.png" />
<div>
Text here. Text here. Text here. Text here.<br />
Text here. Text here. Text here. Text here. Text here. Text here.<br />
Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.<br />
Text here. Text here.Text here. Text here.Text here. Text here.
Text here. Text here. Text here. Text here.<br />
Text here. Text here. Text here. Text here. Text here. Text here.<br />
Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.<br />
Text here. Text here.Text here. Text here.Text here. Text here.
</div>
</article>
原則として、ここにcssとhtmlのスキルを向上させるためのいくつかのベストプラクティスがあります。
1)常に画像とテキストを分離対応するタグ内:<img src="">
画像の場合と<p>
または<div>
または<span>
テキスト用。
2)原則として、コンテンツ(html)とスタイル(css)を可能な限り分離します。
3)CSSがどのように機能するかを理解するには、ボックスモデルを学ぶする必要があります。これがあなたを動かすための優れた記事です: http://css-tricks.com/the-css-box-model/
このボックスモデルは、問題の解決に役立ちます。
挿入[clearboth]
Textエディター内(Visualによって削除されません)エディター)with: