回り込みをさせない - CSS
横並びにして、回り込みをさせないようにしたい!!
結論
overflow: auto;
を使う!!
イメージこんな感じ
アイコンの下の部分にはテキストが回りこないようにしたい
まずは失敗例から
失敗例
See the Pen 回り込みをさせない(悪い例) by tamago (@tamago324) on CodePen.
なにもしていないため、回り込んでしまっている(緑の下の部分)
成功例
overflow: auto;
で回り込みを解除する!
See the Pen 回り込みをさせない(成功例) by tamago (@tamago324) on CodePen.
最初のイメージのソース
※ 重要な部分のみ記載
HTML
<img src="http://imagegw02.twitcasting.tv/image3s/pbs.twimg.com/profile_images/948168012854583298/0rFfF-lX_normal.jpg" class="user-icon"> <div class="content"> <span class="user-name">たまたまご</span><span class="user-id">@tamago324_pad</span><br> ほい!初見さん歓迎!【Five Nights at Freddy's 4】ライトをつけるの怖すぎる<br> <span class="time">00:00</span> </div>
.user-icon { width: 32px; height: auto; float: left; } .content { /* 回り込みをさせない */ overflow: auto; }