如何隐藏或显示正确的页面元素（使用纯CSS的媒体查询）？

I have two class:

我有两节课:

.show{display:block; visibility: visible;}
.hide{display:hidden; visibility: hidden;}

My dilemma is when screen width greater than 768px, Media query makes .hide on some element effectively, The element will be gone. That's my expectance. But when screen width smaller than 768px, Mediq query makes .show on some inline-block element effectively and there is a issue. Because the disable:block of .show class modify the element's model box.

我的困境是当屏幕宽度大于768px时,Media查询会对某些元素有效地生成.hide元素将会消失。这是我的期望。但是当屏幕宽度小于768px时,Mediq查询会在某些内联块元素上有效地显示.show并且存在问题。因为.show类的disable:block修改了元素的模型框。

Simply illustrate:

<span></span><span></span><span></span><span></span>

Add the .show will be turned:

添加.show将被转换:

<span></span>
<span></span>
<span></span>
<span></span>

How do I avoid change the model box when I want a element be visible?

当我希望元素可见时,如何避免更改模型框?

UPDATE: I have a answer not yet test.

更新:我的答案尚未测试。

.show{visibility: visible;height: auto;}
.hide{visibility: hidden; height: 0;}

5 个解决方案

#1

Not only display can be achieved it. you can use visibility height. Like this:

不仅可以实现显示。你可以使用能见度高度。像这样:

.show{visibility: visible;height: auto;}
.hide{visibility: hidden; height: 0;}

#2

I'd go with for inline elements

我会选择内联元素

.show {display:inline;}
.hide {display:none;}

Or for CSS3 only .show {display:initial;}

或仅限CSS3 .show {display:initial;}

Another option would be to code around you're elements, but it gets messy

另一种选择是围绕你的元素进行编码,但它会变得混乱

.hide {display:none;}
.show {display:inline;}
a.show, span.show, ...etc {display:inline;}
td.show {display:table-cell;}

You can see where this is headed.

你可以看到它的发展方向。

You're better off just removing the .hide class than adding the .show class as well. By just removing the hide class or adjusting your media query, the element should rever to its natural state.

你最好只删除.hide类,而不是添加.show类。通过删除隐藏类或调整媒体查询,元素应该重新调整到其自然状态。

Update as you mention media queries, perhaps this is more of an example of what you are after:

当你提到媒体查询时更新,也许这更像是你所追求的一个例子:

@media screen and (max-width: 50em) {
    .hideNarrow {display:none;}    
}

<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>

PLay with it here where you can slide the page width: http://jsfiddle.net/of2yc9nu/2/

在这里播放它可以滑动页面宽度:http://jsfiddle.net/of2yc9nu/2/

#3

try:

.show {
   display: inherit;
}

#4

try this

.hide {
  display: none;
}
.show {
  display: inline-block;
}

<span class="show">1</span>
<span class="hide">2</span>
<span class="show">3</span>
<span class="hide">4</span>
<span class="show">5</span>

#5

-1

.show{
    visibility : visible;
    height: auto;
}
.hide{
    visibility : hidden;
    height: 0;
}

<span class="show">Span1</span>
<span class="show">Span2</span>
<span class="hide">Span3</span>

<div class="show">div1</div>
<div class="show">div2</div>

This will work.

这会奏效。

#1