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

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>

我的目标是在一定范围的媒体屏幕中将这两个divs加入一个，但我不知道如何在不为每个分辨率创建两个不同页面的情况下做到这一点（这种情况需要什么）。

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中使用单独的divs和星号中的破折号进行演示，以便在调整浏览器大小时可以看到它发生变化。在您的情况下，内容可能应该是相同的。