Open wingmeng opened 5 years ago
题目:
请结合下述代码,实现如下图所示的响应式布局效果:
要求:
.container { } .container > div { text-align: center; font-size: 32px; line-height: 50px; color: #fff; } .container > div:nth-child(1) {background: #ADF2B7;} .container > div:nth-child(2) {background: #FEE87A;} .container > div:nth-child(3) {background: #5DFDFB;} .container > div:nth-child(4) {background: #E5B5FC;} .container > div:nth-child(5) {background: #8DFCCA;} .container > div:nth-child(6) {background: #FE985F;}
参考答案:
.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 50px); } .container > div { text-align: center; font-size: 32px; line-height: 50px; color: #fff; } .container > div:nth-child(1) {background: #ADF2B7;} .container > div:nth-child(2) {background: #FEE87A;} .container > div:nth-child(3) {background: #5DFDFB;} .container > div:nth-child(4) {background: #E5B5FC;} .container > div:nth-child(5) {background: #8DFCCA;} .container > div:nth-child(6) {background: #FE985F;}
题目:
请结合下述代码,实现如下图所示的响应式布局效果:
要求:
参考答案: