小程序 css flex的子元素图片被周边元素text挤压变形

这篇具有很好参考价值的文章主要介绍了小程序 css flex的子元素图片被周边元素text挤压变形。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 flex下子元素会自动拉伸,第一个子元素image设置了100 * 100还是被后面的text过长文字挤压了。

解决:
方法1:

让图片不自动拉伸加上
flex:noe

小程序 css flex的子元素图片被周边元素text挤压变形

 方法2:

flex下面所有的子元素都设置宽度,这个会比较麻烦,需要计算。

方法3:

过长的文本设置一个max-width:400rpx,这个跟上面方法2类似文章来源地址https://www.toymoban.com/news/detail-506360.html

到了这里,关于小程序 css flex的子元素图片被周边元素text挤压变形的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp rich-text 富文本组件在微信小程序中自定义内部元素样式

    rich-text 富文本组件在 微信小程序 中,无法直接通过 外部css样式 控制文章内容样式。 解决方案:将传入的富文本内容截取并添加自定义样式类名 (1)全局配置filter方法,实现富文本内容截取转换,附上‘rich-txt-p’样式类 (2)在app.vue中编辑‘rich-txt-p’内容,即富文本需要

    2024年02月19日
    浏览(58)
  • 关于微信小程序、字节小程序rich-text中图片宽度超出范围解决办法

    微信小程序和字节小程序中的rich-text可以将后台富文本显示在前端,但是当图片过宽时微信小程序中就会超出显示范围,而字节小程序中却不会。(微信开发者是不是该优化下这个控件了 ) 微信小程序中    字节小程序中    那就解决微信小程序中的显示问题就可以了,可

    2024年02月11日
    浏览(55)
  • CSS基础-3D变形

    今天介绍 两种 3D变形的形式:3D旋转、空间位移。 在上一节 2D变形中, 我们用到了 transform  属性。那么在3D旋转中同样还是这个属性(怎么老是它,手动狗头)。 用 rotateX () 函数来给  transform  属性赋值,即可实现元素标签绕X(横)轴3D旋转。 语法 用 rotateY () 函数来给 

    2024年02月11日
    浏览(27)
  • CSS基础-2D变形

    变形是CSS3中比较颠覆性的特征之一,今天介绍四种2D变形旋转、缩放、倾斜、位移变形。 变形在CSS3用  transform  属性 来实现。 transform-origin 表示旋转的原点,默认是在盒子的中心位置(center)。 transform-origin 的值可以是一个、两个或者三个,其中的每个值都表示一个方向上的

    2024年02月11日
    浏览(23)
  • CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%;

    CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%; 关键是 background-size:100% 100%; background-size:100% 100%; background-size:contain; 保持纵横比, 容器部分可能空白 background-size:cover; 保持纵横比, 图像可能指显示部分 background-size:100% 100%; 不保持纵横比, 背景图像

    2024年02月20日
    浏览(39)
  • uniapp开发小程序使用rich-text富文本解析对图片大小处理

    1、问题: 在小程序中使用rich-text富文本解析时图片大小不能自适应而超出屏幕问题。 2、解决方式:如下   这是我绑定的值,在绑定值前,需要先进行对图片数据的处理后再使用即可。 3、 接口数据处理方法!!!!!(重点)  .replace(/img/gi, \\\'img style=\\\"width:100%;height:auto\\\"

    2024年02月11日
    浏览(50)
  • flex布局下 元素溢出滚动

    在我们平时使用flex布局时,flex布局的子元素大小并不是不变的,就算是我们设置了固定的宽高,其子元素的大小也是弹性变化的,会随着子元素的多少而变化 此时就利用到了对 flex-basis flex-shrink flex-grow 这三个属性的理解,其代码如下

    2024年02月13日
    浏览(36)
  • 十五、flex弹性元素的样式

    目录: 1. 基本布局 2. 弹性元素的属性:flex-grow 3. 弹性元素的属性:flex-shrink 4. 弹性元素的属性:flex-basis 5. flex 统一设置这3个属性(常用) 6. order 一、基本布局 二、弹性元素的属性:flex-grow flex-grow:1 表示所有元素平均分配剩下的空白,比如空白300,那么每个 方框就在弹

    2024年02月16日
    浏览(28)
  • 【微信小程序】富文本rich-text的图片预览效果的几种方法

    使用原生小程序开发,实现在富文本rich-text中的图片预览效果的几种方法对比。 update:因为方案3wxparser后续没有再维护,解析微信公众号文章时会出现排版错误的问题。作为插件也很难二次开发。换成 mp-html 了 一个不需要用额外组件或插件的方法: 思路 :使用正则把图片的

    2023年04月08日
    浏览(52)
  • uniapp编译微信小程序富文本rich-text的图片样式不生效原因

    开始采用这个replace方法,编译后h5中生效,微信小程序中不生效 详细查看代码,是因为在后台增加文章的时候,富文本编辑器自动给图片设置了宽度,导致在小程序中的替换虽然成功了,但是不生效 修改思路:先把rich-text中的style属性替换掉,然后再替换想要的样式,也就是

    2024年01月16日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包