其父级底部的文字没有上边距，文本在添加内容时向下流动？

Question

所以我将以下模型作为几个产品的模板 -

http://i.imgur.com/BErMOdw.png

注意：文本应始终与容器的基础对齐...

DOM需要针对每个模拟具有可变内容的多个产品重复使用。如果适用，JavaScript将用于插入“储蓄”金额。

我需要标记DOM和CSS，以便文本（如果比模拟中的文本更长）将向下流动并增加容器高度，但文本也需要保持在底部。诀窍是，我不能使用上边距来推送文本，因为内容长度会有所不同。我只想用CSS做这件事。

我想要注意的是，将文本定位为绝对，底部：0将不起作用，因为其他文本将向上流动。如果我使用display：inline-block，vertical-align：bottom。

，也会发生同样的情况

演示代码 - http://jsfiddle.net/cKPDd/ 当然不完全像模拟 - 只需要一个工作演示。我还在下面添加一条评论，附加一个额外的链接来解决SO的限制。

DOM -

/* To view what this should look like with longer text, see -http://i.imgur.com/Ivq9YzB.png */

<div class="product-container">

<div class="content-wrapper savings-quantity-content">
    <p class="savings">50% savings</p>
    <p class="quantity">500 things</p>
</div>

<div class="content-wrapper cost-content">
   <p class="cost">$99.99 total</p>
</div>

</div>

CSS -

.product-container {
    min-height: 110px;
    border: 3px solid blue;
    width: 250px;
}

.content-wrapper {
    max-width: 140px;
}

.savings-quantity-content {
    float:left;
}

.cost-content {
    float: right;
}

非常感谢！

苏

Answer 1

这不是更好的方式，但它的工作;-) !!

body{font-size:15px;}
.product-container {min-height: 110px;border: 1px solid blue;width: 250px;}
.content-wrapper {max-width: 140px;display: inline-block;}
.savings-quantity-content {float:left;}
.cost-content {float: right;}
.savings{color: red;font-size: 0.7em;margin-top: 60px;margin-left: 10px;}
.quantity{font-size: 1.4em;margin-left: 10px;position: absolute;margin-top: -6px;}
.cost{font-size: 1.4em;position: relative;margin-top: 80px;margin-right: 10px;}

特使！ http://jsfiddle.net/cKPDd/2/

Answer 2

问题太简单了：你没有clear编辑浮动

demo here

另外，将width:48%;提交至float ed div以使其正确对齐

<div class="clr"></div>

.clr{
    clear:both;
}

<强> HTML

<div class="product-container">
    <div class="content-wrapper savings-quantity-content">
        <p class="savings">50% savings >50% savings>50% savings>50% savings>50% savings>50% savings>50% savings</p>
        <p class="quantity">500 things</p>
    </div>

    <div class="content-wrapper cost-content">
        <p class="cost">$99.99 total</p>
    </div>
    <div class="clr"></div> <!-- <- add this here -->
</div>

修改

如果不需要IE7或更早的支持，那么：

solution demo

<强> CSS

html, body {
    min-height:100%; /* added */
}

.product-container {
    min-height: 110px;
    border: 3px solid blue;
    width: 250px;
    display:table; /* added */
    height:100%; /* added */
}
.savings-quantity-content {
    width:48%;
    display:table-cell; /* added */
    height:100%; /* added */
    vertical-align:bottom; /* added */
}
.cost-content {
    width:48%;
    height:100%; /* added */
    display:table-cell; /* added */
    vertical-align:bottom; /* added */
}

Answer 3

我认为它会起作用，看看Demo

.savings-quantity-content {
   display:inline-block;

}

.cost-content {
   display:inline-block;
   text-align:right;
   width:140px; 
}