我正在通过 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 的解决方案。
最佳答案
这样的东西会很好...当然可以将 .hideme 类放在特定的媒体查询中,并且显然可以重命名。
CSS
.hideme { display: none; }
HTML
<div>
<div>Image1</div>
<div>Image2</div>
<div class="hideme">Image3</div>
</div>
关于html - 灵活的布局。如何在没有 CSS 的情况下显示条件内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24389610/