984网站建设项目,网站展示模板免费下载,石家庄网络公司哪里多,使用国外空间的网站如图效果#xff1a;2列#xff0c;第一列只有一行#xff0c;第二列多行。要求第一行对齐 实现#xff1a;使用flex
如果不配置flex-shrink的话#xff0c;第一列会被挤压 给第一列#xff1a;备注配置压缩属性#xff1a; flex-shrink#xff1a;0。
!DOCTYPE… 如图效果2列第一列只有一行第二列多行。要求第一行对齐 实现使用flex
如果不配置flex-shrink的话第一列会被挤压 给第一列备注配置压缩属性 flex-shrink0。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
style/* flex布局通过line-height控制第一行对齐*/.remark {display: flex;flex-direction: row;width: 300px;background-color: #eeeeee;padding: 20px;}.col1 {background-color: #b7d4a8;flex-shrink: 0;/*不压缩当第二列数据过多时不会被挤压换行 */}.col2 {margin-left: 10px;}/style
body
div classremarkdiv classcol1备注:/divdiv classcol2夜静春山空,浓睡酒不醒.夜静春山空,浓睡酒不醒.夜静春山空,浓睡酒不醒.夜静春山空,浓睡酒不醒.夜静春山空,浓睡酒不醒.s/div
/div
/body
/html
