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

【问题标题】：How to join divs or div content without JavaScript如何在没有 JavaScript 的情况下加入 div 或 div 内容
【发布时间】：2018-03-24 15:01:12
【问题描述】：

我在 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 加入到特定范围的媒体屏幕中，但我不知道如何在不为每个分辨率创建两个不同页面的情况下做到这一点（这种情况下需要什么)。

【问题讨论】：

欢迎来到本站！查看tour 和how-to-ask page，了解更多关于提出可以吸引高质量答案的问题的信息。您可以edit your question 提供更多信息。
您不需要创建另一个页面。您可以使用合并的内容添加第三个div，并在某个分辨率下显示它并隐藏另外两个，而在其他分辨率下隐藏它并显示另外两个。还有其他方法两种，不过这个很简单。

标签： html css media-queries screen-resolution

【解决方案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>

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

【讨论】：