Question

目前，在我的代码中，我的图片显示为this（右下角） - 如何使用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;
}

文字环绕图像

1 个答案: