Question

我有一个HTML网站，我试图在其中隐藏包含移动视图中图像的div。

@media screen and (max-width: 600px) {
  #kingg { display: none !important; }

}

<div id="kingg" class="grid-uniform section-four"  >
  <div class="container">

    <div class="main-title">
      <div class="hometab-heading box-heading">ABOUT US</div>
      <div class="title-sep"></div>
    </div>

    <div class="grid__item ">
      <div class="grid__item wide--two-thirds post-large--two-thirds large--two-thirds">

        <p>Anvi Jewellers founded by <b>Lavanya Ghulekar</b> in 2017 is a by-product of the passion for creativity of a home maker. Our vision is to build trust with high ethical standards, fair pricing and added value to our customers. We have made it our mission to strive every day to earn the confidence and trust of our clients by meeting and exceeding expectations of quality, service, and unsurpassed value. We expertise in all types of designer light-weight kundan, antique, c-zet, pearl jewellery etc. We make gold ornaments in 20 carat and 22 carat. Anvi Jewellers was founded with a refreshing and courageous objective to make beautiful jewellery accessible, affordable and forever. After 2 years of happy clients, Anvi Jewellers has finally launched online.  Anvi provides our clients with more than they imagined and less than they anticipated.</p>
        <div class="invisible-medium"></div>

        <div style="margin-top:52px;" class="grid__item ">

          <div  class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small--grid__item">

            <img id="see" src="images\a1.jpg" height="259.95" width="239.95" alt="" title="" />

          </div>


          <div  class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small--grid__item">

            <img id="seep" src="images\a11.jpg" height="259.95" width="239.95" alt="" title="" />

          </div>

          <div  class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small--grid__item">

            <img id="seel" src="images\a3.jpg" height="259.95" width="239.95" alt="" title="" />

          </div>
        </div>
      </div>

现在的问题是，它可以在localhost中运行，但是当我将其上传到服务器时，它并没有隐藏div。这是我的网站链接website。

有人可以告诉我可能是什么问题吗？

Answer 1

使用正确的ID或类。使用下面的代码隐藏文本。

.grid__item p:nth-child(1) {
    display: none;
}

Answer 2

在线查看源代码后，实际上就是以下内容：

<style>
@media screen and (max-width: 600px) {
  #kingg img { display: none !important; }

}
</style>

这按预期工作，将图像隐藏在该div中。因此，您发布的代码肯定可以正常工作，因为它似乎没有任何语法错误或任何错误。

所以我要确保您正在上传正在编辑的文件或直接在服务器中编辑文件。

在移动视图中隐藏div在HTML中不起作用

2 个答案: