美文网首页
CSS Shapes图文排版,文字环绕布局

CSS Shapes图文排版,文字环绕布局

作者: 逸笛 | 来源:发表于2024-03-31 20:00 被阅读0次
图片.png

CSS Shapes是一个CSS模块,用于定义几何形状。CSS Shapes模块可以实现不规则的文字环绕效果,需要和浮动配合使用。

<view class="strCont">
                <image class="logo" :src="formatImgUrl(avatar)">
                </image>
                {{str}}
            </view>

    .strCont {
            margin-top: -2rpx;
            width: 100%;
            height: 558rpx;
            padding: 20rpx 15rpx 20rpx 20rpx;
            overflow-y: scroll;
            background-color: #fff;
            border-radius: 0 0 40rpx 40rpx;
            border: 1rpx solid #D0D2D2;
            line-height: 60rpx;
            font-size: 28rpx;
            color: #555;

            .logo {
                width: 212rpx;
                height: 270rpx;
                border-radius: 16rpx;
                float: left;
                margin: 0 20rpx 10rpx 0;
                shape-outside: margin-box;

            }
        }

相关文章

  • CSS shapes布局

    一、前言&索引 CSS Shapes布局可以实现不规则的文字环绕效果,需要和浮动配合使用。 CSS shapes布...

  • float浮动对文本元素排版影响

    本文主要解释float元素对文字图片的排版影响。 在css中有一个常见的图文环绕效果。实现方式主要是将图片左浮动,...

  • 浅谈CSS关于清除浮动的三种方法

    浅谈CSS关于清除浮动的三种方法 CSS中,因为布局需要,我们常常希望出现一些浮动布局,比如图文环绕。这些浮动布局...

  • CSS学习资源

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • 【2016年特别福利】史上最全CSS学习资料大全

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • 关于 BFC 的布局应用:清除浮动、文字环绕

    关于 BFC 的布局应用:清除浮动、文字环绕 参考文档:理解CSS中BFC BFC(Block Formattin...

  • 不规则的文字环绕问题

    常见的文字环绕效果: 1.圆形环绕效果 css代码: 2.椭圆形文字环绕 css代码: 3.三角形文字环绕

  • 查漏补缺

    图文环绕和浮动 最初的CSS只是用来写文章,熟练使用float和clear两个属性来布局: float属性:指定一...

  • CSS格式化排版

    CSS格式化排版 (1)文字排版 文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式...

  • CSS 文字环绕图片

    前言 img是行内元素,因为img标签不会独占一行。之所以img可以设置其宽高,是因为img标签既是行内元素,还是...

网友评论

      本文标题:CSS Shapes图文排版,文字环绕布局

      本文链接:https://www.haomeiwen.com/subject/qsjbtjtx.html