文字の回り込みについて

指定なし

↓HTMLはこんな感じ(共通部分)

<div class="menu-item">
<img src="img/tart.jpg" alt="タルトの写真" width="340" height="300">
<div class="menu-text">
<p>大海原を悠然と泳ぐクジラの姿を見たことがあるでしょうか。そのゆったりとした動きや優しい眼差しを見ていると、慌ただしい日常が遠い世界のできごとのように感じられるのです。時間が経つのも忘れて、ただただクジラを眺めてぼーっと過ごしたひとときの心の充実を、私は今も忘れません。</p>
<p>そんなゆったりとした時間を過ごせるカフェがあったら……そんな思いでつくったのが、このKUJIRA CAFEです。古材を活用した味わいのある内装、花と緑に囲まれたテラス。旬の味覚をふんだんに使ったタルトや、地元の野菜にこだわったキッシュは、どれも手作りです。コーヒーは注文をいただいてから焙煎し、挽きたての香りをお楽しみいただいております。</p>
<p>天気のいい日には、自然を感じられるテラス席もおすすめ。テラス席のみ、ペットの同伴もOKです。おひとり様もお子様連れの方も、お気に入りのお席で、思い思いの時間をゆったりとお過ごしください。</p>
<p>カフェでの時間をより楽しいものにしていただくべく、フラワーアレンジメントの講座や絵本の読み聞かせ、作品展やライブなど、さまざまなイベントも開催しております。スケジュールは<News>で告知いたしますので、ご確認くださいませ。</p>
<p>皆さまのお越しを心よりお待ちしております。</p>
</div>
</div>

↓CSSはこんな感じ。(共通部分)

/* わく全体囲み */
.menu-item {
    background-color: #fbfaf5; /* 背景色 */
    border: solid 3px skyblue; /* わく線 */
    margin-bottom: 50px; /* 余白下 */
}
/* 文字部分 */
.menu-text { 
    border: solid 1px red;/* わく線 */
}

/* 画像 伸縮させる */
img{
    max-width: 100%; /* 横幅 最大100% */
    height: auto;  /* 高さ 自動指定 */
    border: solid 2px blue; /* 枠線 */
    padding-right: 1em; /* 1文字分間をあける */
    }

フレックスボックス

↓CSS 共通部分に付け足して フレックスボックスを使用

/* ----------------------------------------------
   フレックスボックス で回り込み 
------------------------------------------------*/
/* わく全体囲み */
.flex-box{
    display: flex; /* フレックスボックス */
    align-items: flex-start; /* これを入れないと画像が縦に伸びる */
    /* align-itemsのデフォルトが align-items:stretch;(伸縮して揃える)
    になっているので高さいっぱいまで広がってしまうため
    align-items: flex-start;で上に揃えて配置にする */
}

↓HTMLはこんな感じ(共通部分に flex-box クラス追加)

<div class="menu-item flex-box">
<img src="img/tart.jpg" alt="タルトの写真" width="340" height="300">
<div class="menu-text">
<p>大海原を悠然と泳ぐクジラの姿を見たことがあるでしょうか。そのゆったりとした動きや優しい眼差しを見ていると、慌ただしい日常が遠い世界のできごとのように感じられるのです。時間が経つのも忘れて、ただただクジラを眺めてぼーっと過ごしたひとときの心の充実を、私は今も忘れません。</p>
<p>そんなゆったりとした時間を過ごせるカフェがあったら……そんな思いでつくったのが、このKUJIRA CAFEです。古材を活用した味わいのある内装、花と緑に囲まれたテラス。旬の味覚をふんだんに使ったタルトや、地元の野菜にこだわったキッシュは、どれも手作りです。コーヒーは注文をいただいてから焙煎し、挽きたての香りをお楽しみいただいております。</p>
<p>天気のいい日には、自然を感じられるテラス席もおすすめ。テラス席のみ、ペットの同伴もOKです。おひとり様もお子様連れの方も、お気に入りのお席で、思い思いの時間をゆったりとお過ごしください。</p>
<p>カフェでの時間をより楽しいものにしていただくべく、フラワーアレンジメントの講座や絵本の読み聞かせ、作品展やライブなど、さまざまなイベントも開催しております。スケジュールは<News>で告知いたしますので、ご確認くださいませ。</p>
<p>皆さまのお越しを心よりお待ちしております。</p>
</div>
</div>

フロート

↓CSS 共通部分に付け足して フロートを使用

/* ----------------------------------------------
   フロート で回り込み 
------------------------------------------------*/
/* わく全体囲み */
.float {
    overflow: hidden; /* フロート解除 */
}

/* わく内 画像部分 */
.float img{
	 float: left;  /* フロート 左 */
}

↓HTMLはこんな感じ(共通部分に float クラス追加)

<div class="menu-item float">
<img src="img/tart.jpg" alt="タルトの写真" width="340" height="300">
<div class="menu-text">
<p>大海原を悠然と泳ぐクジラの姿を見たことがあるでしょうか。そのゆったりとした動きや優しい眼差しを見ていると、慌ただしい日常が遠い世界のできごとのように感じられるのです。時間が経つのも忘れて、ただただクジラを眺めてぼーっと過ごしたひとときの心の充実を、私は今も忘れません。</p>
<p>そんなゆったりとした時間を過ごせるカフェがあったら……そんな思いでつくったのが、このKUJIRA CAFEです。古材を活用した味わいのある内装、花と緑に囲まれたテラス。旬の味覚をふんだんに使ったタルトや、地元の野菜にこだわったキッシュは、どれも手作りです。コーヒーは注文をいただいてから焙煎し、挽きたての香りをお楽しみいただいております。</p>
<p>天気のいい日には、自然を感じられるテラス席もおすすめ。テラス席のみ、ペットの同伴もOKです。おひとり様もお子様連れの方も、お気に入りのお席で、思い思いの時間をゆったりとお過ごしください。</p>
<p>カフェでの時間をより楽しいものにしていただくべく、フラワーアレンジメントの講座や絵本の読み聞かせ、作品展やライブなど、さまざまなイベントも開催しております。スケジュールは<News>で告知いたしますので、ご確認くださいませ。</p>
<p>皆さまのお越しを心よりお待ちしております。</p>
</div>
</div>