卡片式设计，灵活的高度

Question

让我们想象一下网店，列出产品：

 PICTURE  PICTURE  PICTURE
 PRICE1   PRICE1   PRICE1
                   PRICE1
 buy      buy      buy

第三种产品有两个价格，例如，它们不能固定加高（宽度是固定的），而“买我”按钮必须放在底部。如何做到这一点，可能没有桌子？

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>