CSS如何实现三边包围图片

问题描述

问 题

代码如下

//css部分
    #content{
        width:400px;
        clear:both;
    }
    #content p{
        text-indent:2em;    
    }
    #content  img{
        width:100px;
        float:right;
        clear: both;    
    }
//页面部分
<div id="content">
<img src="22.jpg">
<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p><p>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>

</div>

我用了float:right，只能实现图片出现在右上角，
请问大神们，在不使用js的情况下，纯CSS
如何实现效果的图片在两个段落各占一半？

解决方案

https://jsfiddle.net/2dx304ju/

HTML，img 放对位置就行了

<div id="content">
  <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前<img src="22.jpg">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p>
  <p>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
</div>

CSS

#content {
  width: 400px;
  clear: both;
}
#content p {
  text-indent: 2em;
}
#content img {
  float: right;
  width: 100px;
  margin: 10px 0;
  vertical-align: top;
}

这篇关于CSS如何实现三边包围图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！