In this demo,first there will be 4 gold block ,when you shrink the width of the window,it will be 2 gold blocks per line and the 1 gold block per line;
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul,body{ margin: 0px; padding: 0px; } ul{ height: 120px; list-style: none; } .con li{ width: 23%; height: 120px; background-color: gold; float: left; margin: 30px 1%; } /*when the width of the window less than 800px,there will be 2 gold blocks per line*/ @media (max-width: 800px) { .con li{ width: 46%; margin:30px 2%; } } /*when the width of the window less than 500px,there will be 1 gold blocks per line*/ @media (max-width: 500px) { .con li{ width: 90%; margin: 30px 5%; } } </style></head><body><ul class="con"> <li></li> <li></li> <li></li> <li></li></ul></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
