Question

我有以下HTML代码：

  <! DOCTYPE html>
    <html>
    <head>
    <link rel = "stylesheet" type = "text/css" href ="style.css"> 

    </head>

    <div class = "row">

        <iframe class = "col-9" src="https://www.google.com/maps/embed?pb=! 1m14!1m12!1m3!1d24850.723133556872!2d-77.05667797556558!3d38.87045329841728!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v14271431671" width = 75% height="450"></iframe>

        <div class = "col-3 app">This is where the filters will go</div>

    </div>
    <html>

以及设置12列网格的CSS如下：

    * {border: 1px solid red !important;
    }

    * { -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .grid {
        margin: 0 auto;
        max-width: 1200px;
        width: 100%;
    }
    .row { width: 100%;
        margin-bottom: 20px;
        display: flex;
    }
    .col-1 {
        width: 8.33%;
    }
    .col-2 {
        width: 16.66%;
    }
    .col-3 {
        width: 25%;
    }
    .col-4 {
        width: 33.33%;
    }
    .col-5 {
        width: 41.66%;
    }
    .col-6 {
        width: 50%;
    }
    .col-7 {
        width: 58.33%;
    }
    .col-8 {
        width: 66.66%;
    }
    .col-9 {
        width: 75%;
    }
    .col-10 {
        width: 83.33%;
    }
    .col-11 {
        width: 91.66%;
    }
    .col-12 {
        width: 100%;
    }

我的问题是关于部分类.grid {margin: 0 auto;max-width: 1200px; width: 100%;}。当我删除它时，我的行的元素变得堆叠而不是并排排列。换句话说，<div>This is where the filter will go</div>位于Google地图框架下方，而不是旁边，即使它们位于相同的.row类容器中，并且显示设置为flex。 .grid类不适用于任何东西，但它似乎影响行类中元素的显示。为什么呢？

CSS类影响网格，但似乎没有应用

0 个答案: