CSS如何实现三边包围图片 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS如何实现三边包围图片

screenshot
代码如下

//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
如何实现效果的图片在两个段落各占一半?

展开
收起
杨冬芳 2016-06-08 15:51:11 2241 0
3 条回答
写回答
取消 提交回答
  • 肥晨

    方法一: 可以区分为:上、中、下,三个模块。 上:正常文字展示。 中:图片和文字区域,用行内元素就好。也可以使用css将块级变成行内。 下:正常文字展示。

    方法二: 使用grid,display: grid; grid,是网格布局,grid是一个CSS所有网格容器的简写属性。 设置图在的列和行,即可。

    2023-01-09 11:00:43
    赞同 展开评论 打赏
  • Tobenumberone
    never say never~

    分成上中下三块应该也是容易实现的

    2021-10-18 15:36:24
    赞同 展开评论 打赏
  • 杨冬芳
    IT从业

    代码如下

    //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
    如何实现效果的图片在两个段落各占一半?

    2019-07-17 19:32:08
    赞同 展开评论 打赏
问答分类:
问答标签:
相关产品:
问答排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载