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

其中显示图片在一个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. 【有容云】PPT | 容器落地之二三事儿

    编者注: 本文为10月29日有容云联合创始人兼研发副总裁江松在 Docker Live时代线下系列-广州站中演讲的PPT,本次线下沙龙为有容云倾力打造Docker Live时代系列主题线下沙龙,每月一 ...

  2. Android--SharedPreferences数据存储方案

            SharedPreferences是使用键值对的形式存储的,并且支持多种不同的数据类型,存的是String,取得值也是String.         使用SharedPreferenc ...

  3. Python基础编程 内置函数

    内置函数 内置函数(一定记住并且精通) print()屏幕输出 int():pass str():pass bool():pass set(): pass list() 将一个可迭代对象转换成列表 t ...

  4. js中判断一个对象的类型的种种方法

    javascript中检测对象的类型的运算符有:typeof.constructor.instanceof. typeof:typeof是一个一元运算符,返回结果是一个说明运算数类型的字符串.如:&q ...

  5. feign传输String json串 自动转义 \ 解决方法

    @RequestMapping(value={"/sysOrgRest/getInfoByOrgIds"}, method={org.springframework.web.bin ...

  6. ThreadLocal线程隔离

    package com.cookie.test; import java.util.concurrent.atomic.AtomicInteger; /** * author : cxq * Date ...

  7. 2、JAVA相关基础的学习和工具

    个人感觉,各种语言的基础知识,例如标识符,运算符等在宏观上几乎是一样的,只是在某些方面上会有一点点差异,因为本人已经有了语言基础,所以对于标识符,关键字,运算符等方面的只是便不作赘述,敬请谅解,如果你 ...

  8. IBM实习工作（二）

    2019年秋招前夕再次到ibm项目组参加实习两周,这次主要负责的需求是建立牛奶数据池,在二级菜单建立对账单数据池,数据由Excel导入生成. 分析整个需求,主要分为以下几块: 1.牛奶数据池前台页面, ...

  9. 图解SSH隧道功能

    SSH能够对SSH客户端与服务器端之间的网络通信提供加密功能,而且SSH的端口转发功能还能将其它TCP端口的网络数据通过SSH连接来转发,并且自动提供相应的加密和解密服务,这一过程也被称为“隧道”(t ...

  10. 三层架构(MVC)实现简单登陆注册验证（含验证码）

    前言在我的上一篇微博里我已经提出了登陆的方法,当时我采取的是纯servlet方式,因为当时刚接触到servlet,正好网上没有这方面的全面讲解,所以我就发飙了.不过在现实生产中我们大多采用的三层架构. ...