3

現在、私のコードでは、画像は次のように表示されます(右下) - 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;
}
4

1 に答える 1

3

テキストの前に画像を配置し、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;
}
于 2013-04-09T23:35:00.447 に答える