Question

我必须将我的css-grid更改为基于表格的CSS布局。作为单身人士，响应式CSS可以正常工作，但将它们与一种安全团队相结合对我来说似乎太难了。

任何人都可以查看我错过了什么＆＃34; @支持＆＃34;？我尝试用我的后备规则更改包装器/覆盖网格规则，但结果还不是我想要的。

＆＃13;

<style type="text/css">

html {box-sizing: border-box;
}

.wrapper-of-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}


.wrapper {
    height: auto;
    display: grid;
    -ms-grid;
    -ms-grid-columns: 16% 16% 16%;
    -ms-grid-rows: 10% 10% 10%;
    flex: 0;
    grid-column-gap: 7px;
    grid-row-gap: 7px;
    grid-template-columns: 16% 16% 16%;
    justify-content: center; /*horizontal*/
    align-content: center; /*vertical*/
    grid-auto-flow: row dense;
    }


.box
   {justify-content: center;
    align-items: center;
    background: grey;
      }


img {max-width: 90%;
      height: auto;
      margin: 5px;
              }


.a {grid-column: 1 / span 2;
    grid-row: 1 / span 2; border: 5px solid red;}
.b {grid-column: 3; grid-row: 1}
.c {grid-column: 3; grid-row: 2}
.d {grid-column: 1; grid-row: 3}
.e {grid-column: 2; grid-row: 3}
.f {grid-column: 3; grid-row: 3}



@media only screen and (max-width: 600px)
{/*some definitions*/ }


@supports not (display: grid) {
.wrapper-of-wrapper {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: table !important;
    position: relative !important;
    table-layout: fixed !important;
    border: 2px solid blue;
    }


.a  {display: table-cell !important;
      position: relative !important;
      vertical-align: middle!important;
      max-width: 80% !important;
      max-height: auto !important;
      margin: auto !important;
      border: 2px solid red;
    }


#A {position: relative !important;
      vertical-align: middle !important;
      max-width: 30% !important;
      border: 0px solid;
      margin: 8px !important;
      max-width: 600px !important;
      max-height: 400px !important;
      width: 65% !important;
      height: auto !important;
       }


.b {display: none;}

.c {display: none;}

.d {display: none;}

.e {display: none;}

.f {display: none;}





@media only screen and (max-width: 600px)
{/*some definitions*/ }

  }

</style>

＆＃13;

<body>
  
<!-- - - - - - - - - - -->

<div class="wrapper-of-wrapper">
<div class="wrapper">


<div class="box a" id="A">
<img style="border 2px solid red" src="http://via.placeholder.com/350x200">
</div>

<div class="box b" id="B">
<img src="http://via.placeholder.com/170x100">
</div>

<div class="box c" id="C">
<img src="http://via.placeholder.com/170x100">
</div>

<div class="box d" id="D">
<img src="http://via.placeholder.com/170x100">
</div>

<div class="box e" id="E">
<img src="http://via.placeholder.com/170x100">
</div>

<div class="box f" id="F">
<img src="http://via.placeholder.com/170x100">
</div>

<!-- - -- - - - - - - - - -->

</body>

＆＃13;

为什么我的CSS网格布局的后备不起作用？

0 个答案: