如何隱藏或正確顯示頁面元素（使用純CSS的媒體查詢）？

我有兩個類：
如何隱藏或正確顯示頁面元素（使用純CSS的媒體查詢）？

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

我的困境是，當屏幕寬度小於768px時，媒體查詢使.hide一些元素有效，元素將會消失的。這是我的期望。但是，當屏幕寬度小於768px時，Mediq查詢會使.show在某些內嵌塊元素上有效，並且存在問題。因爲.show類的disable:block修改了元素的模型框。

簡單說明：

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

添加.show將被打開：

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

如何避免改變模型盒時，我想一個元素是可見的？

UPDATE：我有一個答案尚未測試。

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

來源

2014-09-26 Todd Mark

你能撥弄嗎？ – divakar 2014-09-26 04:23:58

使用jquery函數hide（）和show（）。它將處理塊和內嵌塊元素。 – Maigret 2014-09-26 04:25:11

@Borachio我想讓媒體查詢實現它，並且沒有js lib.because因爲我使用媒體屏幕做了響應頁面 – 2014-09-26 04:26:41

不僅可以實現display它。您可以使用 height。像這樣：

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

來源

2015-03-05 08:35:03

只要確保你明白'visibility：hidden'和'display：none'之間的區別。默認情況下'visibility：hidden'爲顯示元素保留空間，'display：none'不會，這就是爲什麼你需要改變高度的原因。要覆蓋所有內容，您還應該添加'width：0'來隱藏。 – 2015-03-08 23:10:57

我會跟去內聯元素

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

或者對CSS3僅.show {display:initial;}

另一種選擇是編寫圍繞你的元素，但它會混亂

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

你可以看到它在哪裏。

你最好刪除.hide類，而不是增加.show類。通過刪除hide類或調整媒體查詢，元素應該切換到其自然狀態。

更新你提到媒體查詢，也許這更是你是什麼一個例子後：

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

發揮它在這兒，你可以滑動頁面寬度：http://jsfiddle.net/of2yc9nu/2/

來源

2014-09-26 04:30:26

對不起，但是這不適合** block **元素。 – 2014-09-26 04:31:04

不是關於內聯元素的問題嗎？ – 2014-09-26 04:31:41

非常感謝。你解決這個問題的方式爲我的目的提供了一條新的道路。 – 2014-09-26 06:18:44

嘗試：

.show { 
    display: inherit; 
}

來源

2014-09-26 04:33:28 Fergoso

如果內聯元素父項是「block」或「inline」以外的任何內容，則這不起作用。 – 2014-09-26 05:13:25

試試這個

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

來源

2014-09-26 04:39:00

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

這將工作。

來源

2014-09-26 06:01:53

jQuery純CSS如何？ – 2014-09-26 06:12:41

如何隱藏或正確顯示頁面元素（使用純CSS的媒體查詢）？

回答

相關問題