Question

.wrappers {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 10rem auto 10rem 10rem;
}

.header {
  background: #9575cd;
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<div class="wrappers">

  <header class="header">
    <h1>Earthly Branches </h1>

  </header>
</div>

There is an image from chrome tools

所以问题是，即使我使用网格样式，当我放置这些代码时，该网站也看起来像是无响应的设计。我在做错事，但我不知道在哪里。

Answer 1

您的代码看起来不错，您无需使它响应就可以了，只需分析一下，您就可以形成一个4行的网格，其中<table style="font: 8pt Verdana; width:100%;"> <tr style="background-color:#ffcc00;color:black;"> <th style="width:170px"> <table style="padding: 0px; margin: 0px; font: 8pt verdana; vertical-align: 100%; height: 100%; width:100%;"> <tr> <td style="width:40%; margin:0px; text-align: left;"> <strong>Mile<br />Marker</strong></td> <td style="width:1%;margin: 0px auto;"> <br /></td> <td style="width:59%;margin: 0px auto; text-align: center;"> <strong>The Safety<br />Rating</strong></td> </tr> </table> </th> <th style="color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;"> <strong>Directions</strong> </th> <th style="color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;"> <strong>Comments</strong> </th> <th style="color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;"> <strong>Number of Vehicles</strong> </th> <th style="padding: 9px; color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;width:70px;"> <strong> Map   &  </strong><br /> <strong> Weather  </strong><br /> </th> <th style="color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;"> <strong>Source</strong> </th> </tr> <tr id="firstRow" style="background-color:#ffff99; font: 8pt verdana;height:100%">  <td style='height: 100px; padding:0; text-align:center;' rowspan='1'>   <table id="This is where my problem resides" style='padding: 0px; margin: 0px; height: 100%; border:thin solid #800080; background-color:#ffff99;'> <tr style=' font: 8pt verdana; height:100%;'>  <td style='height:100%; text-align:left;vertical-align:middle;' rowspan='1'>15.5<br />The Road</td> <td style='margin: 0px; border-width: 0px; padding: 0px; width:1%; height:100%; background-color:black; border-top-color: 0; border-right-color: 0; border-bottom-color: 0; border-left-color: 0;' rowspan='1'> </td> <td style='width:121px;height:100%;' rowspan='1'> Poor            Great<br/> <input type='radio' name='rblSafety249' class='radio_b' value='1' runat='server' disabled="disabled" /> <input type='radio' name='rblSafety249' class='radio_b' value='2' runat='server' disabled="disabled" /> <input type='radio' name='rblSafety249' class='radio_b' value='3' runat='server' disabled="disabled" /> <input type='radio' name='rblSafety249' class='radio_b' value='4' runat='server' disabled="disabled" /> <input type='radio' name='rblSafety249' class='radio_b' value='5' runat='server' disabled="disabled" /> <br /> <br /> <div style='text-align: center;'> <input onclick=window.open( 'RateSafety.aspx') type='button' style='width: 80px; padding:0' id='btnRateSafety' name='btnRateSafety' value='Rate Safety' visible='true' /> <br/> <div style='width:110px'>  </div> </div> </td> </tr> </table> </td> <td> The directions go here. </td> <td> Comments go here </td> <td> the number goes here </td> <td><br />  <input type="submit" name="MyRepeater:_ctl1:btnShowMap" value="Map" id="MyRepeater__ctl1_btnShowMap" style="width:35px; " /> <a href='#footnote'><sup> <span id="MyRepeater__ctl1_lFootnoteMap" style="font-weight:bold;">1</span></sup> </a><br style="display:block;margin: 2px 0;" /><br style="display:block;margin: 1px 0;" />  <a href='#footnote'><sup> </sup> </a><br style="display:block;margin: 2px 0;" /><br style="display:block;margin: 1px 0;" />  <input type="submit" name="MyRepeater:_ctl3:btnShowWeather" value="Weather" id="MyRepeater__ctl3_btnShowWeather" style="width:60px;" /> <a href='#footnote'><sup> <span id="MyRepeater__ctl3_lFootnoteWeather" style="font-weight:bold;">1</span></sup> </a><br /><br /> </td> <td> http://www.aWebAddress.com </td> </tr> </table>的三个具有Private Sub Worksheet_Change(ByVal Target As Range) Dim Rt As Long ' Target row to write to With Target If .Address(0, 0) = "E27" Then Rt = Application.Max(36, Cells(Rows.Count, "E").End(xlUp).Row) + 1 Cells(Rt, "E").Value = .Value End If End With End Sub，而其他的{{1 }}，同时您要创建12个相等的列，并且您有height 从头到尾10rem，因此，如果您希望标题适合auto，只需使header适应所有列即可，如下所示

column

.wrappers

使用网格系统

1 个答案: