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是幻灯片的一部分。在完整站点版本中，滑块显示三个图像的组。因此，在平板电脑版本中，第三个图像现在将成为第二个图像的一部分（但不会消失）：

<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>

Answer 2

假设那里只有3个div，你总是想要隐藏第3个div，你可以这样做：

div:nth-child(3) {
    display:none;
}

JSFiddle

Answer 3

最好的方法是在媒体查询中指定您想要隐藏＆＃34;。

的div。

类似的东西：

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

@media only screen and (min-width:300px) and (max-width:480px) {
    .ThingTohide {
        display: none;
    }
}

Answer 4

这对我来说可能听起来很愚蠢，但是当你在CSS中搜索解决方案时，为什么你的标题会说“没有CSS”？

除此之外，您的平板电脑版本实际上只有2个来自后端的div，还是它应该呈现的方式？

在第二种情况下，您可以在第三个div上使用display: none。

div > div:nth-child(3) {
  display: none;
}

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

Answer 5

使用jquery

尝试此操作

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

<div class="group2">
 <div>Image4</div>
</div>

jquery代码

$(document).ready(function(){
    if ($(window).width()<640) { //to check if it's on mobile device, or any other method if it's not suits you
        $('.move').prependTo('.group2');
    };
});

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

5 个答案: