floatで画像の位置に回り込みさせたいんですが、高さが合いません・・・

Question

<div class="contents wrapper"> <!-- main begin --> <main id="main_content"> <h2>青葉区のラーメン</h2> <div class="float_box"> <div class="men_list"> <a href=""><h3>ラーメンビリー</h3></a><img src="images/ramenbili.jpg"> </div> <br><p>次郎系ラーメンといえばこれ！見た目のインパクトとは反対にスープはスッキリ！</p> </div> <div class="float_box"> <div class="men_list"> <a href="#"><h3>カラツケグレ</h3></a><img src="images/karatukegure.jpg" alt="カラツケ　グレ"> </div> <br><p>韓国風のつけ麺のお店です!麺の中にはタピオカが入っておりモチモチ！</p> </div> <div class="float_box"> <div class="men_list"> <a href="#"><h3>つけ麺　和</h3></a><img src="images/tukemenkazu.jpg" alt="つけ麺　和"> </div> <br><p>東京本店にあるつけ麺のお店！！魚介系と動物系のスープ が織りなすハーモニーが絶品です！是非一度食べてみてください！</p> </div> <div class="float_box"> <div class="men_list"> <a href="#"><h3>炎助</h3></a><img src="images/ensuke.jpg" alt="炎助"> </div> <p>担々麺のお店です！スープは最初甘辛いのですが、その後に旨みのある 爆発的辛さがきます！</p> </div> <div class="float_box"> <div class="men_list"> <a href="http://www.sennibo.com/"><h3>千極煮干</h3></a><img src="images/sengokunibosi.jpg" alt="千極煮干"> </div> <p>煮干しラーメンと言えばここ！濃厚なスープが決めてのお店です！</p> </div> <div class="float_box"> <div class="men_list"> <a href="http://jikaseimenkirinji.com/index.html"><h3>キリンジ</h3></a><img src="images/kirinji.jpg" alt="キリンジ"> </div> <p>次郎系ラーメン！面は極太で食感はうどんに近いです！ 魚粉がアクセントとなりやみつきになります！</p> </div> <div class="float_box"> <div class="men_list"> <a href="#"><h3>はてな</h3></a><img src="images/hatena.jpg" alt="はてな"> </div> <p>老若男女に人気のもっちりとした麺！食感を味わう油そば！</p> </div> <div class="float_box"> <div class="men_list"> <a href="#"><h3>まぜたん</h3></a><img src="images/mazetan.jpg" alt="まぜたん"> </div> <p>極太麺にしっかりと絡む特濃芝麻醤が味の決め手！！ お好みで粉チーズもあり！！（150円）</p> </div>

</main>
<!-- main end -->

CSS
.men_list{
float: left;
padding: 0;
margin-bottom: 50px;
margin-right: 10px;
vertical-align: bottom;
}

.float_box{
overflow: hidden;
}

Comments

[yambejp]

「高さが合いません」を具体的に図示してください

[hatena19]

何と何の高さが合わないのですか。
画像と説明の上辺を揃えたいということかな?

[aisya]

そうです！画像の上辺とテキストの位置を揃えたいです。

[hatena19]

質問は編集できますので、それを質問に追記してください。
このコメント欄は最初は閉じてますので回答者に目につきにくいです。

Answer 1

.float_box の HTML を下記のようにすればいいでしょう。

    <div class="float_box">
      <a href="#">
        <h3>ラーメンビリー</h3>
      </a>
      <div class="men_list">
        <img src="https://placehold.jp/200x200.png">
      </div>
      <p>次郎系ラーメンといえばこれ！見た目のインパクトとは反対にスープはスッキリ！</p>
    </div>

やっていることは <br> を削除。
タイトル行(h3)を men_list の外に出す。

Comments

[aisya]

ありがとうございます！勘違いして覚えてました！