文字环绕图像周围的

Question

目前在我的代码我的形象看起来像this（右下） - 我将如何使它apear通过使用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; 
}