html - 卡片式设计，高度灵活

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>