网站版权 备案icp,深圳企业500强,杭州网站设计,外发加工平台思路
大屏左右两侧高宽一致#xff0c;内部卡片可按比例设置#xff01;
使用弹性布局和属性 flex-grow 设置比例#xff1b;间隔使用 margin-bottom 设置#xff0c;最后一个卡片不设置#xff1b;
效果如图 代码说明
CSS代码 26 - 30#xff0c;左右两侧设置弹性布…思路
大屏左右两侧高宽一致内部卡片可按比例设置
使用弹性布局和属性 flex-grow 设置比例间隔使用 margin-bottom 设置最后一个卡片不设置
效果如图 代码说明
CSS代码 26 - 30左右两侧设置弹性布局CSS代码 34 - 40设置卡片直接的间隔最后一个不设置Html代码 4 - 6,9 - 11设置卡片比例
templatediv classscrollbar-maindiv classleft-cardsdiv styleflex-grow: 3;/divdiv styleflex-grow: 2; /divdiv styleflex-grow: 5; /div/divdiv classright-cardsdiv styleflex-grow: 2;/divdiv styleflex-grow: 1; /divdiv styleflex-grow: 1; /div/div/div
/templatestyle langscss scoped
.scrollbar-main {position: absolute;top: 0;bottom: 0;left: 0;right: 0;.left-cards,.right-cards {position: absolute;top: 10px;bottom: 10px;display: inline-flex;flex-direction: column;width: 350px;overflow: auto;background: #ccc;div{background: #999;margin-bottom: 10px;}div:last-child{margin-bottom: 0;}}.left-cards {left: 10px;}.right-cards {right: 10px;}
}
/styleflex-grow
W3school flex-grow
