html - カードのようなデザインで、高さが自由自在

Question

製品をリストする Web ショップを想像してみましょう。

 PICTURE  PICTURE  PICTURE
 PRICE1   PRICE1   PRICE1
                   PRICE1
 buy      buy      buy

たとえば、3 番目の製品には 2 つの価格があり、高さを固定することはできません (幅は固定されています)。「購入する」ボタンは下部に配置する必要があります。おそらくテーブルなしで、これを行う方法は?

Answer 1

に別の行を使用する場合は、buy高さの設定について心配する必要はありません。

CSS

<style type="text/css">
    .row {
        width: 600px;
    }

    .col {
        float: left;
        width: 200px;
    }

    .clear {
        clear: both;
    }

</style>

HTML

<div class="row">
    <div class="col">
        picture <br />
        price
    </div>
    <div class="col">
        picture <br />
        price
    </div>
    <div class="col">
        picture <br />
        price<br />
        price
    </div>
    <div class="clear"></div>
</div>



<div class="row">
    <div class="col">
        buy
    </div>
    <div class="col">
        buy
    </div>
    <div class="col">
        buy
    </div>
    <div class="clear"></div>
</div>