CSS的Grid网格布局

Grid网格布局
就是通过设置百分比,或者默认划分的单位个数,来达到宽度自适应的效果
比如,页面控件的宽度,设置自适应随着显示器的宽度的增加而增加,网页永远占满整个屏幕

.searchContentRowTopStyle { display: -ms-grid; display: grid; -ms-grid-columns: 3% 10% 21% 10% 21% 10% 21% 4%; grid-template-columns: 3% 10% 21% 10% 21% 10% 21% 4%; -ms-grid-rows: 10px; grid-template-rows: 10px; }

.rowleft { -ms-grid-column: 1; -ms-grid-row: 1; }

.rowOnelineOne { -ms-grid-column: 2; -ms-grid-row: 1; }

.rowOnelineTwo { -ms-grid-column: 3; -ms-grid-row: 1; }

.rowOnelineThree { -ms-grid-column: 4; -ms-grid-row: 1; }

.rowOnelineFour { -ms-grid-column: 5; -ms-grid-row: 1; }

.rowOnelineFive { -ms-grid-column: 6; -ms-grid-row: 1; }

.rowOnelineSix { -ms-grid-column: 7; -ms-grid-row: 1; }

.rowright { -ms-grid-column: 8; -ms-grid-row: 1; }

这里,设置了8列,两边为边距,中间的三对,每个对是一个label和一个具体的控件,input、select、datetime

.searchButtonRowStyle { display: -ms-grid; display: grid; -ms-grid-columns: 50% 50%; grid-template-columns: 50% 50%; -ms-grid-rows: 10px; grid-template-rows: 10px; }

这里,页面上两个表格,并排显示各占一半屏幕

.datetimeTwoStyle{ display: -ms-grid; display: grid; -ms-grid-columns: auto 20px auto; grid-template-columns: auto 20px auto; -ms-grid-rows: 10px; grid-template-rows: 10px; }

这里,中间有一个控件,固定大小,永远处于页面的中间

相关文章
相关标签/搜索