美文网首页
flex布局 一侧固定宽度 一侧自适应

flex布局 一侧固定宽度 一侧自适应

作者: IT_小学生 | 来源:发表于2021-11-26 12:24 被阅读0次

flex布局 一侧固定宽度 一侧不管


截屏2021-11-26 下午12.19.39.png

布局是弹性布局 左边图片 右边文字
相同宽度 的div中放入图片并且让图片宽度保持div的宽度 高度自适应
可以看到在 左边的图片被挤压变形

解决办法就是 给右侧的div 开启 flex:1; 自适应
flex布局 一侧固定宽度 一侧自适应


截屏2021-11-26 下午12.20.08.png

可以看到问题立马就解决了。

相关文章

  • flex布局 一侧固定宽度 一侧自适应

    flex布局 一侧固定宽度 一侧不管 布局是弹性布局 左边图片 右边文字相同宽度 的div中放入图片并且让图片宽...

  • CSS-flex常见面试题

    废话不多说! flex-内容宽度等分 左右布局,一侧定宽,一侧自适应撑满 未知高宽上下左右居中 这个效果就不展示了...

  • 浮动+负margin实现两栏布局

    两栏布局:一侧固定宽度,一侧自适应(如果需要主要内容优先显示,这就限定了div的Dom顺序) 但是会发现left覆...

  • 一侧定宽、一侧自适应,尽量多的方案实现

    有下面几种方案能实现一侧定宽一侧自适应。使用flex布局,这也是目前主流方式。父容器设置display:flex,...

  • CSS两列布局的多种方式

    两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了。这种两列布局的样式是我们在平时...

  • 移动端布局

    1.百分比布局 百分比布局, 也叫流式布局效果: 宽度自适应,高度固定。 2.Flex布局 Flex布局/弹性布局...

  • 布局居中

    两栏布局 左侧固定宽度右边自适应 负margin方法: overflow方法: position方法: flex方...

  • flex的左右布局,右侧出现x轴滚动条

    场景: flex的左右布局,左侧菜单宽度固定,右侧自适应。 实现: .main{width:100%;disp...

  • 常见的flex布局

    一、完美居中 2、 二、等分布局 三、等比布局 四、一侧固定,一侧自适应 五、两端对齐 1、左右两大块 2、并列结...

  • CSS布局

    1. 实现一个两栏布局,左侧固定宽度200px,右侧自适应宽度,附上预览接。 使用浮动做布局 使用 flex 布局...

网友评论

      本文标题:flex布局 一侧固定宽度 一侧自适应

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