僅當有足夠的空間時才顯示div，如果沒有，則隱藏它

我有一個包含日期列的表格。每個日期看起來像僅當有足夠的空間時才顯示div，如果沒有，則隱藏它

週三，08.06.2011

當瀏覽器窗口的寬度太窄，我想只顯示沒有星期幾的日期，以節省水平空間。像這樣

08.06.2011

一個理想的解決方案將允許像

<div class="weekday">Wednesday, </div><div class="date">08.06.2011</div>

標記，並沒有涉及到的JavaScript完全基於CSS的。但如果這是不可能的，我可以使用基於JavaScript的解決方案。

來源

2011-06-08 Paul

您可以「查詢」用戶設置的分辨率。作爲一個例子，看看這個： http://www.javascripter.net/faq/browserw.htm

我不知道什麼是「太小」是指在你的應用程序，因爲它取決於很多事情（字體大小等），但如果你能確定當瀏覽器窗口大小太小時，您可以設置JavaScript來隱藏div＃週一。

來源

2011-06-08 20:12:30

此解決方案將需要JavaScript。以下是對您的HTML進行的修改，以在顯示器周圍包含容器。容器中可能有更多的內容，但爲了簡單起見，我只打算在其中顯示日期。

<div id="container"> 
    <div id="daydisplay" class="weekday"> 
     Wednesday 
    </div> 
    <div class="date"> 
     08.06.2011 
    </div> 
</div>

現在您可以使用任何JavaScript庫來獲取視口的寬度。 YUI和JQuery都具有這些功能，所以既然這很容易，我會假設我們有一個名爲widthOfScreen的變量，它包含視口的寬度。我也會假設我們有一個叫做left的變量，它保存了這個顯示從左邊開始的像素數量。

var container = document.getElementById('container'), 
containerWidth = container.clientWidth || container.scrollWidth; 

if (containerWidth + x > widthOfScreen) { 
    document.getElementById('daydisplay').style.display = 'none'; 
}

這應該做的伎倆。

來源

2011-06-08 20:14:36 Zoidberg

理想的解決方案並不取決於預設的瀏覽器寬度，而是讓星期幾消失，否則表格將變得非常狹窄，以致需要水平滾動來查看所有行的元素。我沒有找到這個簡明的實現，但如果你去amazon.com並改變瀏覽器窗口的寬度，那麼水平顯示的「要考慮的項目」和「你已經瀏覽過的項目」的數量會相應地調整。我想要一個類似的行爲，但我只需要一個div。 – Paul 2011-06-08 20:27:45

這就像放置一個偵聽窗口大小的函數一樣簡單，然後進行調整。我認爲這可能是window.onresize或類似的東西。 – Zoidberg 2011-06-08 20:49:48

這是一個非常難看的解決方案，但如果您想讓整個單詞消失，沒有比使用overflow: hidden更好的CSS技術。

我修改您的標記有點...也許你能拿出更好的東西，但希望這點你在正確的方向爲純CSS解決方案：

<div class="date"> 
    <span>08.06.2011</span> 
    <span class="weekday">Wednesday</span> 
</div>

CSS：

div { 
    background: #ccc; 
    height: 18px; 
    margin: 0 0 5px; 
    overflow: hidden; } 
span { float: right; } 
span.weekday { 
    float: left; 
    padding: 0 4px; }

請參閱：http://jsfiddle.net/EQTBa/

來源

2011-06-08 20:24:06 Wex

這將削減div。太窄時不能完全隱藏它。 – 2011-06-08 20:26:07

Actualy這給了我想法，當你看到使用浮動。 – 2011-06-08 20:36:37

我想我應該從我的小提琴發佈CSS，這基本上是我在做什麼。 – Wex 2011-06-08 20:41:16

這裏需要一些腳本。 CSS不能根據寬度等元素的屬性來執行操作。只需在腳本的頭部添加簡單的javascript命令，例如在jQuery中：

$(document).ready(function() { 
    if ($(window).width() < 1024) 
     $('body').addClass('too-narrow'); 
});

然後在CSS中休息一下。

編輯：

其實，有CSS的解決方案，這一點，如果你真的想要它。

<style> 
.row { height: 30px; background: red; overflow: hidden; width: 120px; } 
.row .other { height: 30px; float: left; } 
.row .date, 
.row .weekday { height: 30px; float: right; } 
</style> 



<div class="row"> 
    <div class="other">Tilte</div> 
    <div class="date">18.04.2010</div> 
    <div class="weekday">Wednesday</div> 
</div>

你需要有高度設置兩個排股利和其他/日期/平日的div。將這兩個設置爲正確，將所有其他（較早）的字段設置爲向左浮動。在Chrome上爲我工作（顯示標題18.04.2010），不知道其他人如何。

來源

2011-06-08 20:24:06

這是非常完美的。如果日期與左側對齊而週日不可見，那將是完美的。 – Paul 2011-06-09 00:32:59

正如你所看到的，它們都是向右移動的，所以平日是最後一個孩子，會「倒下」。如果他們都離開了，他們的日期就會下降。所以要麼正確的浮動或切換它們的位置。 – 2011-06-09 06:31:16

對窄窗口使用媒體查詢，然後在其中將weekday類定義爲display：none。

來源

2013-01-17 03:19:51

僅當有足夠的空間時才顯示div，如果沒有，則隱藏它

回答

相關問題