html - CSS 网格视图适合至少 2 个 div 的屏幕

Question

我有一些 div，必须制作一个网格。现在我需要：1）在水平方向上总是有最小 2 个 div，最大无穷大

2) 水平 div 总是适合屏幕

3）您可以为 divs 设置最小宽度，bcz divs 不能从 200px 开始

4) div 对任何类型的浏览器都很灵活

5）只有CSS

标签： htmlcss

Answer 1

#parent {
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            padding:2px;
        }
        .child {
            background: url(https://www.sample-videos.com/img/Sample-jpg-image-200kb.jpg);
            flex: 1;
            min-width: 25%;               
            box-sizing: border-box;
            border: 2px solid #382800;
            position: relative;  
            padding-top:35%;
        }
        @media (max-width: 700px) {
            .child {
                min-width: 33.33%;
                padding-top: 46.66%;
            }
        }

        @media (max-width: 400px) {
            .child {
                min-width: 50%;
                padding-top: 70%;
            }
        }
        .child_name {
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 12px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            position: absolute;
            bottom:0px;
            right:0px;
            left:0px;
        }