TIL

Today I Learned. 知ったこと、学んだことを書いていく

回り込みをさせない - CSS

横並びにして、回り込みをさせないようにしたい!!

結論

overflow: auto;を使う!!

イメージこんな感じ

f:id:tmg1998:20180324104345p:plain:w400

アイコンの下の部分にはテキストが回りこないようにしたい

まずは失敗例から

失敗例

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>

CSS

.user-icon {
    width: 32px;
    height: auto;
    float: left;
}

.content {
    /* 回り込みをさせない */
    overflow: auto;
}

参考文献