CSS | float | 回り込み

HTML


<p>
    <img class="img-1" src="/images/samples/sakura.jpg">

    <span class="blue">Lorem</span> ipsum dolor sit amet, Et in voluptas iusfto, vel aspernatu
    numquam atque quasi quidem! Alias esse ea iste consequuntur voluptatum harum eius ratione.

    <img class="img-2" src="/images/samples/river1.jpg">

    <span class="blue">Lorem</span> ipsum dolor quidem sit dolor dolor amet, Et in voluptas iusfto, couuntur aspernatu
    numquam atque quasi quidem! Alias consequuntur esse ea iste Alias quidem consequuntur voluptatum harum eius ratione.

    <img class="img-3" src="/images/samples/river2.jpg">

    <span class="blue">Lorem</span> dolor sit amet, Et in voluptas iusfto, vel aspernatu
    numquam atque quasi quidem! Alias esse consequuntur voluptatum harum eius ratione.
</p>

CSS


p   {
    max-width: 23rem;
}

img {
    width:  8rem;
    padding: 8px;
}

.blue {
    color: blue;
}

実行結果初期状態

Lorem ipsum dolor sit amet, Et in voluptas iusfto, vel aspernatu numquam atque quasi quidem! Alias esse ea iste consequuntur voluptatum harum eius ratione. Lorem ipsum dolor quidem sit dolor dolor amet, Et in voluptas iusfto, couuntur aspernatu numquam atque quasi quidem! Alias consequuntur esse ea iste Alias quidem consequuntur voluptatum harum eius ratione. Lorem dolor sit amet, Et in voluptas iusfto, vel aspernatu numquam atque quasi quidem! Alias esse consequuntur voluptatum harum eius ratione.

HTML


<p>
    <img class="img-1" src="/images/samples/sakura.jpg">

    <span class="blue">Lorem</span> ipsum dolor sit amet, Et in voluptas iusfto, vel aspernatu
    numquam atque quasi quidem! Alias esse ea iste consequuntur voluptatum harum eius ratione.

    <img class="img-2" src="/images/samples/river1.jpg">

    <span class="blue">Lorem</span> ipsum dolor quidem sit dolor dolor amet, Et in voluptas iusfto, couuntur aspernatu
    numquam atque quasi quidem! Alias consequuntur esse ea iste Alias quidem consequuntur voluptatum harum eius ratione.

    <img class="img-3" src="/images/samples/river2.jpg">

    <span class="blue">Lorem</span> dolor sit amet, Et in voluptas iusfto, vel aspernatu
    numquam atque quasi quidem! Alias esse consequuntur voluptatum harum eius ratione.
</p>

CSS


p   {
    max-width: 23rem;
}

img {
    width:  8rem;
    padding: 8px;
}

.blue {
    color: blue;
}

CSS


img {
    float: left;
}

実行結果left

Lorem ipsum dolor sit amet, Et in voluptas iusfto, vel aspernatu numquam atque quasi quidem! Alias esse ea iste consequuntur voluptatum harum eius ratione. Lorem ipsum dolor quidem sit dolor dolor amet, Et in voluptas iusfto, couuntur aspernatu numquam atque quasi quidem! Alias consequuntur esse ea iste Alias quidem consequuntur voluptatum harum eius ratione. Lorem dolor sit amet, Et in voluptas iusfto, vel aspernatu numquam atque quasi quidem! Alias esse consequuntur voluptatum harum eius ratione.

HTML


<p>
    <img class="img-1" src="/images/samples/sakura.jpg">

    <span class="blue">Lorem</span> ipsum dolor sit amet, Et in voluptas iusfto, vel aspernatu
    numquam atque quasi quidem! Alias esse ea iste consequuntur voluptatum harum eius ratione.

    <img class="img-2" src="/images/samples/river1.jpg">

    <span class="blue">Lorem</span> ipsum dolor quidem sit dolor dolor amet, Et in voluptas iusfto, couuntur aspernatu
    numquam atque quasi quidem! Alias consequuntur esse ea iste Alias quidem consequuntur voluptatum harum eius ratione.

    <img class="img-3" src="/images/samples/river2.jpg">

    <span class="blue">Lorem</span> dolor sit amet, Et in voluptas iusfto, vel aspernatu
    numquam atque quasi quidem! Alias esse consequuntur voluptatum harum eius ratione.
</p>

CSS


p   {
    max-width: 23rem;
}

img {
    width:  8rem;
    padding: 8px;
}

.blue {
    color: blue;
}

CSS


img {
    float: right;
}

実行結果right

Lorem ipsum dolor sit amet, Et in voluptas iusfto, vel aspernatu numquam atque quasi quidem! Alias esse ea iste consequuntur voluptatum harum eius ratione. Lorem ipsum dolor quidem sit dolor dolor amet, Et in voluptas iusfto, couuntur aspernatu numquam atque quasi quidem! Alias consequuntur esse ea iste Alias quidem consequuntur voluptatum harum eius ratione. Lorem dolor sit amet, Et in voluptas iusfto, vel aspernatu numquam atque quasi quidem! Alias esse consequuntur voluptatum harum eius ratione.

HTML


<p>
    <img class="img-1" src="/images/samples/sakura.jpg">

    <span class="blue">Lorem</span> ipsum dolor sit amet, Et in voluptas iusfto, vel aspernatu
    numquam atque quasi quidem! Alias esse ea iste consequuntur voluptatum harum eius ratione.

    <img class="img-2" src="/images/samples/river1.jpg">

    <span class="blue">Lorem</span> ipsum dolor quidem sit dolor dolor amet, Et in voluptas iusfto, couuntur aspernatu
    numquam atque quasi quidem! Alias consequuntur esse ea iste Alias quidem consequuntur voluptatum harum eius ratione.

    <img class="img-3" src="/images/samples/river2.jpg">

    <span class="blue">Lorem</span> dolor sit amet, Et in voluptas iusfto, vel aspernatu
    numquam atque quasi quidem! Alias esse consequuntur voluptatum harum eius ratione.
</p>

CSS


p   {
    max-width: 23rem;
}

img {
    width:  8rem;
    padding: 8px;
}

.blue {
    color: blue;
}

CSS


.img-1,
.img-3 {
    float: right;
}

.img-2 {
    float: left;
}

実行結果交互に

Lorem ipsum dolor sit amet, Et in voluptas iusfto, vel aspernatu numquam atque quasi quidem! Alias esse ea iste consequuntur voluptatum harum eius ratione. Lorem ipsum dolor quidem sit dolor dolor amet, Et in voluptas iusfto, couuntur aspernatu numquam atque quasi quidem! Alias consequuntur esse ea iste Alias quidem consequuntur voluptatum harum eius ratione. Lorem dolor sit amet, Et in voluptas iusfto, vel aspernatu numquam atque quasi quidem! Alias esse consequuntur voluptatum harum eius ratione.