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

标签 html css

我正在通过 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/

相关文章:

javascript - JQuery:使隐藏的跨度可见并闪烁

html - A 链接内的 Div 框,希望最小化 A 链接光标框区域

javascript - 在 js/html/css 中制作可点击的单元格网格

javascript - 用 z-index 确定最近的元素?

jquery - CSS 过渡不适用于 jQuery 切换类

html - 如何使转换后的元素出现在定位元素上?

html - 没有得到实际的 Canvas 高度和宽度,并且 fillRect 被模糊了

javascript - Jquery: $.each() 返回值然后结束

javascript - 英语到法语,法语到英语翻译网络应用程序

jquery - <li> 的条件 float