Question

我在HTML中有这个块：

<a href="http://www.taquaritinga.sp.gov.br/" target="_blank">
  <img src="img/logo_prefeitura.png" alt="Foto do brasão da prefeitura de Taquaritinga" class="img-responsive">
</a>
<div class="categoria_menu_wrap_down"></div>
</aside>
<aside>
  <a href="#">
    <img src="img/logo_troy.png" alt="Foto do logo da Troy Informática" onclick="return false" class="img-responsive">
  </a>
  <div class="categoria_menu_wrap_down"></div>
</aside>
</div>

我的目标是在一定范围的媒体屏幕中仅将这两个div加入一个{但不知道如何“，但我不知道如何在不为每个分辨率创建两个不同页面的情况下做到这一点（&& ＃39;这种情况所必需的。）

Answer 1

您可以添加第三个div合并的内容，并以某种分辨率显示并隐藏其他两个，而在其他分辨率隐藏它并显示其他两个：

@media (max-width: 600px) {
  .categoria_menu_wrap_down {
    display: none;
  }
  .categoria_menu_wrapped {
    display: block;
  }
}

@media (min-width: 601px) {
  .categoria_menu_wrap_down {
    display: block;
  }
  .categoria_menu_wrapped {
    display: none;
  }
}

<div class="categoria_menu_wrap_down">- First div</div>
<div class="categoria_menu_wrap_down">- Second div</div>
<div class="categoria_menu_wrapped">* First div<br />* Second div</div>

注意：此示例中的媒体查询仅用于演示。您需要调整它们以满足您的需求。我还在合并的div中的单独的div和星号中使用破折号进行演示，以便在调整浏览器大小时可以看到它发生变化。在您的情况下，内容可能应该相同。

如何在没有JavaScript的情况下加入div或div内容

1 个答案: