想实现一个类似知乎个人主页的资料显示布局 类是下面这样

其中显示图片在一个div,Name和class和button在一个div中，使用justify-content: space-between; 分两边显示

刚开始的时候设置图片所在的div为width：150px;, Name和class和button所在的div为了自适应宽度，使用了width:100%； 自己写了个简单的demo是可以的，但是真正放到项目中就不行了，右侧的div会挤压左侧的div,然后就变成了这样

后来百度得并不能设置右侧div为width:100%;可以设置其 flex:1; 让其占比为1，就可以自适应剩余的宽度了，特此记录.

另外，可以使用 .[class]：hover {} 来设置当鼠标放到按钮上时按钮的样式

flex布局 一侧固定宽度 一侧自适应的更多相关文章

  1. flex 布局 input 宽度不自适应

    flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!

  2. flex布局嵌套之高度自适应

    查遍各大资源无任何flex嵌套布局的例子,经过自己折腾完成了项目中的高度自适应需求(更多应用于前端组件) 效果图: html代码:(关键地方已经用颜色特别标识 ^_^) <!DOCTYPE ht ...

  3. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  4. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  5. flex布局无法自动适应的bug以及实现textarea根据内容自适应

    -webkit-box布局无法自动适应高度的bug css3的新属性display:-webkit-box带来了前端开发自动适应布局的春天 ,但是我发现这个布局有个问题, 而且这个问题我无法解决: 描 ...

  6. Flex 布局 （两个div居中自适应 宽度变小变一列，宽度够就是两列）

    https://www.runoob.com/w3cnote/flex-grammar.html display: flex; justify-content: center; align-items ...

  7. Flex布局做出自适应页面--语法和案例

    本文发布在: github项目地址:https://github.com/tenadolanter/flex-layout-demo SegmentFault地址:https://segmentfau ...

  8. flex布局制作自适应网页

    网页布局是css的一个重点应用.传统的布局都是依赖display.position.float属性来实现的,但是特殊布局就不易实现,如垂直居中. 01 flex布局是什么?‍ Flex 是 Flexi ...

  9. flex布局下el-table横向滚动条失效

    如下图,是一种常见的页面结构,我们可以有很多方法实现,inline-block,float,flex等等 但是,最近项目中遇到一个怪事,左边是侧边栏导航,右边是一个数据展示table,el-table ...

随机推荐

  1. DesignPattern系列__05开闭原则

    介绍 开闭原则是编程设计中最基本.最重要的原则. 定义:一个软件实体如类.方法和模块等,应该对扩展(提供方)开放,对修改(使用方)关闭.用抽象构建框架,用实现扩展细节. 也就是说,在需求发生新的变化时 ...

  2. 微服务世界之Nacos初见

    Nacos 1.概要 Dubbo 服务的注册和发现/rpc通信/负载均衡/限流/熔断/降级 Spring Cloud alibaba 服务注册发现中间件 zookeeper/eureka/consul ...

  3. c#小灶——标识符和关键字

    标识符 我们之前说,命名空间的名字是自己取的,类名也是自己取的,方法名也是自己取的,以后还有各种常量.变量.对象……这些名字是自己取的.这些名字,就是标识符. 标识符规则: 标识符可以包含大小写字母. ...

  4. weblogic 内存溢出解决 java.lang.OutOfMemoryError: PermGen space

    解决办法: 1.在idea中,运行时给weblogic server中 VM options 配置增加内存的参数:-server -XX:PermSize=1024m -XX:MaxPermSize= ...

  5. 【游记】NOIP2018初赛

    声明 本文最初的版本创建之时,本人甚至只是个电脑的小白,因而不太会用电脑编辑文字,最初的版本写在一个Word文档里,被随意的丢弃在我杂乱无比的网盘的某一个角落,直到我决定整理自己的成长历程,将散落的游 ...

  6. JVM运行时数据区--深入理解Java虚拟机 读后感

    程序计数器 程序计数器是线程私有的区域,很好理解嘛~,每个线程当然得有个计数器记录当前执行到那个指令.占用的内存空间小,可以把它看成是当前线程所执行的字节码的行号指示器.如果线程在执行Java方法,这 ...

  7. 发布一个自己的jar包给全球人使用

    目录 项目准备 sonatype 注册 申请sonatype工单 gpg配置 项目配置 依赖oss-parent 自定义配置 pom配置 全局settings配置 发布 验证 maven 项目对于我们 ...

  8. 重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述

    定场诗 八月中秋白露,路上行人凄凉: 小桥流水桂花香,日夜千思万想. 心中不得宁静,清早览罢文章, 十年寒苦在书房,方显才高志广. 前言 洛伊安妮·格罗纳女士所著的<学习JavaScript数据 ...

  9. EXP查询合集提权后渗透必备

    0x00 整理的一些后渗透提权需要用到的一些漏洞,后渗透提权的时候可以看一下目标机那些补丁没打,再进行下一步渗透提权. 0x01 CVE-2019-0803 [An elevation of priv ...

  10. Top11 构建和测试API的工具

    立刻像专业人士一样构建API 组织正在改变他们已经在软件应用项目中成功的微服务架构模型,这就是大多数微服务项目使用API(应用程序接口)的原因. 我们要为微服务喝彩,因为它相对于其他的模型有各种先进的 ...