html - 文字环绕图像

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;
}

Answer 1

把你的图片放在你的文字之前，并给它一个浮动的风格：对。

应该看起来像这样：

<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;
}