使用display时占用空间：none

时间：2016-07-19 19:58:04

标签： html css razor

我是媒体查询的新手，对于.net一般来说都是新手，而且我已经盯着这段代码太久了，所以请善待。

我试图使第一个td完全消失在最大宽度775px并用第二个td替换它。似乎第一个td正在成为＆＃34;隐形＆＃34;但仍占用空间。 我仅将边框添加为视觉辅助工具。 任何帮助将不胜感激！

@media screen and (min-width:776px) {
  .hidey {
    border: 1px solid blue;
  }
  .hidey2 {
    display: none;
    border: 1px dashed red;
  }
}
@media screen and (max-width:775px) {
  .hidey {
    border: 1px dashed blue;
    display: none;
  }
  .hidey2 {
    border: 1px solid red;
  }
}

<table>
  <tr>
    <th>Blah:</th>
    <td class="hidey" style="width: 20em; "><span>td one</span>
    </td>
    <td class="hidey2" style="width: 20em;"><span>td two</span>
    </td>
  </tr>
</table>

View 1

View 2, with unwanted space

2 个答案:

答案 0 :(得分：-1)

无效的标记和语法

由于以下原因，这可能是您的标记问题：

  • 您正在使用@@media而非仅仅@media的媒体查询前置，这在大多数情况下都是无效的（在ASP.NET Razor View之类的内容之外）。
  • 您的</span>元素中的<td>元素已关闭，但没有任何开放的<span>元素，这些元素也将无效。

此外，您也可以整合查询：

@media screen and (min-width:776px) {
  .hidey { border: 1px solid blue; }
  .hidey2 { display: none; border: 1px dashed red; }
}
@media screen and (max-width:775px) {
  .hidey { border: 1px dashed blue;  display: none; }
  .hidey2 { border: 1px solid red; }
}

示例

您的示例代码似乎按预期工作，即使在an MVC Razor View as seen in this interactive example内并在下面进行演示：

enter image description here

＆＃13;
＆＃13; 
@media screen and (min-width:776px) {
  .hidey { border: 1px solid blue; }
  .hidey2 { display: none; border: 1px dashed red; }
}
@media screen and (max-width:775px) {
  .hidey { border: 1px dashed blue;  display: none; }
  .hidey2 { border: 1px solid red; }
}
＆＃13; 
<table>
  <tr>
    <th>Blah:</th>
    <td class="hidey" style="width: 20em; "><span>td one</span></td>
    <td class="hidey2" style="width: 20em;"><span>td two</span></td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

<style>
    @media only screen {
        .hidey1 {
            display: none;
        }
        .hidey2 {
            display: table;
        }
    }

    @media only screen and (min-width: 775px) {
        .hidey1 {
            display: table;
        }
        .hidey2 {
            display: none;
        }
    }
</style>  

<table>
    <tr>
        <td class="hidey1">td one</td>
        <td class="hidey2">td two</td>
    </tr>
</table>
相关问题
最新问题