在图像周围浮动文本 [英] Float text around image

问题描述

我需要帮助创建一个漂浮在价格标签上的文本容器，如下图所示：

I need help creating a text container floating around the price tag like seen on this picture :

这里是我到目前为止所尝试的：

Here is what I've tried so far:

jsFiddle演示

jsFiddle Demo

HTML：

<div class="product">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <div class="pricetag">
    999 €
    </div>
</div>

CSS：

.product
{
    width: 258px;
    height: 150px;
    background-color: white;
    display: inline-block;
    margin-right: 25px;
    color: black;
    padding: 5px;
}

.pricetag
{
    height: 54px;
    width: 115px;
    background: url('http://i.imgur.com/ES3wymx.png') no-repeat;
    float: right;
    padding-top: 20px;
    padding-left: 5px;
    font-weight: bold;
}

我希望价格标签总是在某个位置

I want the price tag be always on a certain position (so it's on the same position for each product) and the text floating around like on the picture I posted.

推荐答案

这里是一个只有一个解决方案如果您有固定的高度div（此处 .product ）：

Here is a solution that works only if you have fixed height divs (here .product) :

jsFiddle演示

jsFiddle Demo

您必须将 .pricetag div。然后，主要诀窍是使用一个宽度为0的悬浮的间隔符：

You will have to put your .pricetag div before the text. Then, the main trick is to use a spacer floated right with a width of 0 :

HTML：

<div class="product">
    <div class="pricetagspacer"></div>
    <div class="pricetag">
        999 €
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS：

.pricetag
{
    height: 54px;
    width: 115px;
    background: url('http://i.imgur.com/ES3wymx.png') no-repeat;
    float: right;
    padding-top: 20px;
    padding-left: 5px;
    font-weight: bold;
    clear: right; /* to be positioned under the spacer */
    position: relative; 
    right: -24px; /* to go a bit offside */
    margin-left: -24px; /* corrected margin because of the previous line */
}
.pricetagspacer {
    height: 100%; /* to space the whole height */
    width: 0; /* so we don't have more "padding" on the right of .product */
    float: right;
    margin-bottom: -65px; /* to eventually position correctly the .pricetag */
}

这篇关于在图像周围浮动文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！