Precondition: <meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover"> The effect diagram is as follows: Demand Analysis Height and Width: 1 picture [width 320, height 320] [2 times the draft size] spacing: When there are 2 images, the last image only has left margin. Rounded Corner 10: When there is 1 picture, [all] have rounded corners Induction We all learned the induction method of mathematics in middle school, which is to first find out whether a proposition is true when n=1, and then assume that it is true when n=k, and prove that it is also true when n=k+1, thereby proving that the proposition is true when n=k [k=any real number]. Code <div class="grid-img-box"> <van-image class='grid-img' v-for="value in data.photo" :key="value" fit="cover" :src="value" /> </div> .grid-img{ /** Width and height 1. 3n+1 and it is the second to last picture 2. 3n+1 and it is the last picture In both cases, the width and height of the picture should be 320; The remaining two cases are: 3. When there is only one picture, the width and height are 320; 4. For other cases and indexes, the width and height are both 220; */ display: inline-block; width: 220px; height: 220px; &:only-child{ width: 320px; height: 320px; } &:nth-child(3n+1):nth-last-child(2), &:nth-child(3n+2):last-child{ width: 332px; height: 332px; } /** Spacing/Layout*/ &:nth-child(3n+2){ margin: 0 6px; } &:nth-child(n+4){ margin-top: 6px; } &:first-child{ border-top-left-radius: 10px; } &:last-child{ margin-right: 0; border-bottom-right-radius: 10px; } /** Rounded Corners*/ //Bottom left rounded corner: the first &:nth-child(3n+1) in the last row { &:last-child, &:nth-last-child(2), &:nth-last-child(3){ border-bottom-left-radius: 10px; } } //Process four layouts //Increase the second margin to push the third one to the next line &:nth-child(2):nth-last-child(3){ margin-right: 220px; } //Reset the second rounded corner &:nth-child(2):nth-last-child(3){ border-top-right-radius: 10px; } //Reset the third margin and radius &:nth-child(3):nth-last-child(2){ margin-top: 6px; margin-right: 6px; border-radius: 0 0 0 10px; } //Reset the fourth rounded corners &:nth-child(4):last-child{ border-radius: 0 0 10px 0; } } Summarize This is the end of this article about how to use CSS to implement a nine-grid layout for dynamic images. For more relevant CSS nine-grid layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: MySql cache query principle and cache monitoring and index monitoring introduction
>>: The IE environment stipulates that the div height must be greater than the font height
The following operation demonstrations are all ba...
Table of contents Preface Scenario Analysis Summa...
Table of contents Why is IN slow? Which is faster...
Preface Today, when I was using a self-written co...
1. When you open the web page, 503 service unavai...
I just tried it on IE6, and it does show the toolb...
MySQL 5.7.20 installation and configuration metho...
Table of contents Preface 1. Arrange the installa...
1. Using Selenium in Linux 1. Install Chrome Inst...
Abstract: This article mainly explains how to ins...
Preface Nginx 's built-in module supports lim...
Table of contents Actual combat process Let's...
Table of contents background Inspiration comes fr...
The following is an introduction to using SQL que...
Table of contents 1. Ternary operator judgment 2....