html - 灵活的布局。如何在没有 CSS 的情况下显示条件内容？

Question

我正在通过 css max-width 媒体查询构建网站的平板电脑版本。到目前为止，调整样式很容易。但是我发现对于网站的一部分，我需要用 2 个图像而不是 3 个图像来显示 div，但我找不到用 css 来做到这一点的方法。

例子:

网站版本

<div>
  <div>Image1</div>
  <div>Image2</div>
  <div>Image3</div>
</div>

平板电脑版本(如果 max-width 是什么，只显示两个 div)

<div>
  <div>Image1</div>
  <div>Image2</div>
</div>

有什么想法吗？

谢谢!

编辑

好的，我会尝试更具体一些，因为每个答案都与 display:none 相关，虽然这是一个很好的解决方案，但它不适用于我正在尝试做的事情。

div 是幻灯片的一部分。在完整站点版本中， slider 显示三个图像组。所以在平板电脑版本中，第三张图片现在将成为第二组的一部分(但不会消失):

<div>
 <div>Image1</div>
 <div>Image2</div>
</div>

<div>
 <div>Image3</div>
 <div>Image4</div>
</div>

等等……

我不确定这是否可以通过 css 完成，或者是否需要使用某种 in-html 脚本来解决该问题。这就是为什么我要求没有 css 的解决方案。

Answer 1

这样的东西会很好...当然可以将 .hideme 类放在特定的媒体查询中，并且显然可以重命名。

CSS

.hideme { display: none; }

HTML

<div>
  <div>Image1</div>
  <div>Image2</div>
  <div class="hideme">Image3</div>
</div>