html - 2 使用 HTML 和 CSS 可变宽度的列

Question

我正在尝试开发一个包含图片、标题和价格的产品列表。顶部是图片，下方是标题和价格。

问题在于标题的价格具有可变长度。价格应该占据它需要的所有空间，标题可以占据剩余空间。如何实现？

例子:

上图没有编码，这是我想要完成的。 html 代码非常基础:

<div class="product">
    <div class="content">
        <div class="image">
            <img src="..."/>
        </div>
        <div class="product-bottom">
            <div class="title">
                <h3><a href="...">...</a></h3>
            </div>
            <div class="price">
                &euro; 199<sup>99</sup>         
            </div>
        </div>
    </div>
</div>

Answer 1

您可以使用 display table 和 table-cell - 为价格列提供一个小于价格的宽度，并且没有为标题提供宽度，它将始终如果更大，请拉伸(stretch)价格栏。然后你也可以垂直对齐

.product-bottom {display:table;}
.title,
.price {display:table-cell; vertical-align:top;}
.price {width:10px;}

Example