放置一个价格高于另一个价格的 div答案

【问题标题】：Place one div with price above another one放置一个价格高于另一个价格的 div
【发布时间】：2015-04-01 09:25:21
【问题描述】：

我在默认的 Wordpress 主题“Unite”上有一个由 wooCommerce 插件驱动的小型 eStore。

我想修改一个默认的价格布局，现在看起来像这样：

css sn-p:

<span class="price">
    <del>
        <span class="amount">2,200.00&nbsp;руб.</span>
    </del> 
    <ins>
        <span class="amount">1,500.00&nbsp;руб.</span>
    </ins>
</span>

我需要将两个价格放在一行中，这样才不会破坏网格。目前，它以这种方式呈现手表列表：

如何修改 css 规则以使用 css 和伪元素将所有价格放在一行中？谢谢！

【问题讨论】：

display: inline-block?

标签： html css wordpress woocommerce

【解决方案1】：

应该这样做，但您需要更改字体大小，使其不超过产品容器的宽度... /* 在 span.price 中添加了一个虚构的宽度，不确定您的产品有多宽？ */

span.price {
  width: 220px;
  display: block;
}
span.price del,
span.price ins {
  float: left;
}
span.price del {
  width: 35%;
  font-size: .7em;
}
span.price ins {
  width: 65%;
  font-size: 1.4em;
}

<span class="price">
    <del>
        <span class="amount">2,200.00&nbsp;руб.</span>
    </del> 
    <ins>
        <span class="amount">1,500.00&nbsp;руб.</span>
    </ins>
</span>

【讨论】：

谢谢，您的解决方案适用于我的某些版本！

【解决方案2】：

您可以使用 Float 或 displat:inline-block 显示行跨度... 折扣标签：浮动：左/右价格标签：浮动

【讨论】：