Question

我有一行显示两行的标识和关于我们之间的文字。它适用于宽屏设备，但在小屏幕设备上看起来很压缩。如何在小屏幕设备上将标识置于我的文本（第二行）下，并在宽屏幕上保持相同？

＆＃13;

/*For logos*/
.popit {
  text-align: center;
  padding-bottom: 60px;
}

@media screen and (min-width: 320px) {
  .popit {
    height: 57px;
    width: 180px;
  }
}

@media screen and (min-width: 940px) {
  .popit {
    height: 57px;
    width: 180px;
    
  }
}
/*For my Text between logos*/
.popito {
  color: #333333;
  padding-bottom: 60px;
  text-align: center;
}

@media screen and (min-width: 320px) {
  .popito {
    font-size: 30px;
    letter-spacing: 2px;
    font-weight: 800;
    position: relative;
    margin-bottom: 0px;
    text-transform: uppercase;
  }
}

@media screen and (min-width: 940px) {
  .popito {
    font-size: 40px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
  }
}

＆＃13;

<table style="width: 100%;">
  <tbody>
    <tr>
      <th class="popit" width="33%"> <img class="alignnone size-full wp-image-1671" src="https://media-cf.assets-cdk.com/teams/repository/export/18f/774a0a28d100584040050568b5709/18f774a0a28d100584040050568b5709.png" alt="" width="180" height="50" /></th>
      <th width="33%">
        <div class="popito">ABOUT US</div>
      </th>
      <th class="popit" width="33%"><img class="alignnone size-full wp-image-1671" src="https://media-cf.assets-cdk.com/teams/repository/export/18f/774a0a28d100584040050568b5709/18f774a0a28d100584040050568b5709.png" alt="" width="180" height="50" /></th>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

你可以试着让你的html标记像这样：

<table style="width: 100%;">
  <tbody>
    <tr class="smalldevice">
      <th colspan=3>
        <div class="popito">ABOUT US</div>
      </th>
    </tr>
    <tr>
      <th class="popit" width="33%"> <img class="alignnone size-full wp-image-1671" src="https://media-cf.assets-cdk.com/teams/repository/export/18f/774a0a28d100584040050568b5709/18f774a0a28d100584040050568b5709.png" alt="" width="180" height="50" /></th>
      <th width="33%">
        <div class="popito">ABOUT US</div>
      </th>
      <th class="popit" width="33%"><img class="alignnone size-full wp-image-1671" src="https://media-cf.assets-cdk.com/teams/repository/export/18f/774a0a28d100584040050568b5709/18f774a0a28d100584040050568b5709.png" alt="" width="180" height="50" /></th>
    </tr>
  </tbody>
</table>

然后为要隐藏的媒体查询提供整个第二行（smalldevice）display: none;，并在显示时显示display: block;。

使用上排的div做同样的事情并且它应该可以工作，虽然我没有时间测试它。

我希望我的意思是可以理解的：）

问候

Answer 2

将此添加到您的Console.WriteLine(p.Aggregate((current, next) => current + ", " + next));

<head>

这告诉浏览器你的html是否有响应。

如果设备宽度为低px，则更改html表

2 个答案: