围绕图片的文本换行

Question

目前我的代码中，我的图片看起来像这样（右下角）- 我该如何使用CSS将其显示在右上角，并使文本环绕图片：

HTML：

            <div class="leftColBlog">
                        {{ streams:cycle stream="agrilife_news" limit="5"}}
                            {{ entries }}
                                <h2 class="blogTitle">{{ title }}</h2>
                                    <div class="textCon alignLeft">
                                        <p class="text"> {{ description }} </p>
                                            <img class="alignRight" src="{{ image:thumb }}" />
                                    </div>

                            {{ /entries}}   
                        {{ /streams:cycle }}
                    </div>

CSS:

.leftColBlog{
    display: inline-block;
    width:650px;
    border-right: 1px solid red;
}
.textCon{
    display: inline-block;
}
.textCon p{
    padding: 0 10px 0 10px;
}
.textCon p a{
    color: #fff !important;
}
.textCon img{
    display: inline-block;
}
.alignleft{
    float: left;
    margin: 0 0 0 5px;
}
.alignRight{
    float: right;
    margin: 0 0 0 5px;
}

- Jess McKenzie

---

尝试在标记中将图像放在文本之前。 - Ejaz

Answer 1

将图片放在文字前面，并给它设置float:right样式。

应该看起来像这样：

<div class="leftColBlog">
        {{ streams:cycle stream="agrilife_news" limit="5"}}
              {{ entries }}
                  <h2 class="blogTitle">{{ title }}</h2>
                    <div class="textCon alignLeft">
                      <img class="alignRight" src="{{ image:thumb }}"/>
                      <p class="text"> {{ description }} </p>

                    </div>

              {{ /entries}}   
        {{ /streams:cycle }}
</div>

CSS

.leftColBlog{
    display: inline-block;
    width:650px;
    border-right: 1px solid red;
}
.textCon{
    display: inline-block;
}
.textCon p{
    padding: 0 10px 0 10px;
}
.textCon p a{
    color: #fff !important;
}
.textCon img{
    float:right;
}
.alignleft{
    float: left;
    margin: 0 0 0 5px;
}
.alignRight{
    float: right;
    margin: 0 0 0 5px;
}

- denvdancsk