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

其中显示图片在一个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. JDBC连接池-C3P0连接

    JDBC连接池-C3P0连接 c3p0连接池的学习英语好的看英文原版      c3p0 - JDBC3 Connection and Statement Pooling 使用c3p0连接池  三种方 ...

  2. Django是如何防止注入攻击-XSS攻击-CSRF攻击

    注入攻击-XSS攻击-CSRF攻击介绍请访问:https://www.cnblogs.com/hwnzy/p/11219475.html Django防止注入攻击 Django提供一个抽象的模型层来组 ...

  3. vmware15pro安装ubuntu18.10时出现显示不全问题

    如果这个时候用网上的ALT+左键拖拽根本没有效果 所以这里提供另外一种方式 就是正常安装的时候发现分区部分显示不全 此时点击右上角的橙色小×:询问是否退出 我们点击退出:之后就会来到试用界面 到了这里 ...

  4. 0x33 同余

    目录 定义 同余类与剩余系 费马小定理 欧拉定理 证明: 欧拉定理的推论 证明: 应用: 定义 若整数 $a$ 和整数 $b$ 除以正整数 $m$ 的余数相等,则称 $a,b$ 模 $m$ 同余,记为 ...

  5. Promise 学习心得

    当了这么久码农到今天没事才开始去深究 Promise 这个对象 什么是 Promise, Promise 有什么用? 在写代码的时候多多少少都有遇见过地狱式的回调 代码看起来没问题就是有点乱,Prom ...

  6. JavaWeb——使用会话维持状态

    1.会话的作用 使用会话是为了维持状态,维持的是请求域请求之间的状态.因为HTTP请求自身是完全无状态的.从服务器的角度来看,当用户发出第一个请求开始,服务器无法将新的请求与之前的请求关联起来,举例说 ...

  7. Unity进阶之：Shader渲染

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...

  8. Linux与Unix到底有什么不同？

    来自:开源中国 原文:Linux vs. Unix: What's the difference? 链接: https://opensource.com/article/18/5/difference ...

  9. ansible批量自动配置Juniper

    一.需求 有几台新上线的Juniper,需要批量配置下syslog,ntp,snmp基础配置 二.拓扑 三.实施步骤 1.读取配置并输出作为初步核查 2.把配置载入网络其中一台网络设备中,并做一个sh ...

  10. Hive 窗口分析函数

    1.窗口函数 1.LAG(col,n,DEFAULT) 用于统计窗口内往上第n行值 第一个参数为列名,第二个参数为往上第n行(可选,默认为1),第三个参数为默认值(当往上第n行为NULL时候,取默认值 ...