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

其中显示图片在一个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. 自定义SWT控件一之自定义单选下拉框

    一.自定义下拉控件 自定义的下拉框,是自定义样式的,其中的下拉框使用的是独立的window,非复选框的下拉框双击单机其它区域或选择完之后,独立window构成的下拉框会自动消失. package co ...

  2. 放出一批学生管理系统jsp源码，部分有框架

    基于jsp+struts 2的学生管理系统eclipse - 源码码头   https://www.icodedock.com/article/25.html 基于jsp+mysql的JSP学生成绩管 ...

  3. Fork 多进程 模拟并行访问web service获取响应时间差

    #include <ros/ros.h> #include <iostream> #include <string> #include <cstring> ...

  4. Redis进阶应用：Redis+Lua脚本实现复合操作

    一.引言 Redis是高性能的key-value数据库,在很大程度克服了memcached这类key/value存储的不足,在部分场景下,是对关系数据库的良好补充.得益于超高性能和丰富的数据结构,Re ...

  5. 使用 PowerShell 远程管理

    要求 PowerShell 版本要求至少是2.0版本以上,目前PowerShell 2.0 支持最低的操作系统版本为Windows XP.本次操作使用的是 PowerShell 5.1 请使用管理员身 ...

  6. Python 之父的解析器系列之三：生成一个 PEG 解析器

    原题 | Generating a PEG Parser 作者 | Guido van Rossum(Python之父) 译者 | 豌豆花下猫("Python猫"公众号作者) 声明 ...

  7. memcached中hash表相关操作

      以下转自http://blog.csdn.net/luotuo44/article/details/42773231 memcached源码中assoc.c文件里面的代码是构造一个哈希表.memc ...

  8. windows如何访问wsl系统下的文件

    windows如何访问wsl系统下的文件 可以在wsl终端输入以下命令 explorer.exe . 会出现如下界面 这样就可以很方便的查看wsl的文件了

  9. Go语言-基本的http请求操作

    Go发起GET请求 基本的GET请求 //基本的GET请求 package main import ( "fmt" "io/ioutil" "net/ ...

  10. node爬虫的几种简易实现方式

    说到爬虫大家可能会觉得很NB的东西,可以爬小电影,羞羞图,没错就是这样的.在node爬虫方面,我也是个新人,这篇文章主要是给大家分享几种实现node 爬虫的方式.第一种方式,采用node,js中的 s ...