Javascript 当容器太小时，让div消失

我正在为一家网店设计一些独特的卖点（usp）。下午5点后，其中一个usp消失

第一个usp在下午5点后消失，剩下三个usp

当你在平板电脑上查看时，应该只有3个usp。但根据时间或宽度的不同，当在较小的设备上观看时，应该会消失

我希望我的解释清楚。我正在调整一个脚本，我们已经满足了我的需要。我为usp设计的javascript在5年后消失，javascript是：

<div class="main-container col1-layout">

        <div id="countdown" class="hide-below-768">
            <div class="container">
                <div class="usp">
                    <div class="feature indent countdown">
                        <span class="icon i-countdown no-bg-color"></span>
                        <p class="no-margin ">Bestel binnen 
            <strong>
                <span id="t_hours">5 uren en </span><span id="t_minutes">6 minuten</span> <span id="t_seconds"></span>
            </strong>  
            en ontvang je bestelling morgen al in huis
        </p>

        <script type="text/javascript">
            var lang_hours      = 'uren';
            var lang_hour       = 'uur';
            var lang_minutes    = 'minuten';
            var lang_minute     = 'minuut';
            var lang_seconds    = 'seconden';
            var lang_second     = 'seconde';

            var Counter = Class.create();  
            Counter.prototype = {

                time_left: 0,
                keep_counting: 1,
                interval: null,

                /* 
                * INITIALIZATION - CONFIGURATION 
                */  
                initialize: function(t) {  
                    this.time_left = t;
                    this.interval = setInterval("countdown.timer()", 1000);
                    // this.timer();
                },

                timer: function() {
                    this.countdown();
                    this.format_output();
                },

                countdown: function() {
                    if(this.time_left <= 60) {
                        clearInterval(this.interval);
                        this.keep_counting = false;
                    }

                    this.time_left = this.time_left - 1;
                },

                format_output: function() {
                    if(this.keep_counting) {
                        var hours, minutes, seconds;
                        seconds = this.time_left % 60;
                        minutes = Math.floor(this.time_left / 60) % 60;
                        hours = Math.floor(this.time_left / 3600);

                        if($('t_hours')) $('t_hours').innerHTML = hours+' '+(hours == 1 ? lang_hour : lang_hours) + ' en ';
                        if($('t_hours') && hours < 1) $('t_hours').innerHTML = "";
                        if($('t_minutes')) $('t_minutes').innerHTML = minutes+' '+(minutes == 1 ? lang_minute : lang_minutes);
                        if($('t_minutes') && minutes < 1) $('t_minutes').innerHTML = "";
                        if($('t_seconds') && ( hours < 1 && minutes < 10)) $('t_seconds').innerHTML = (minutes >= 1 ? ' en ' : '') + seconds + ' ' + (seconds == 1 ? lang_second : lang_seconds);
                    } else {
                        $('countdown').remove();
                    }
                }

            };

            var countdown = new Counter(18464);
        </script>

                    </div>
                    <div class="feature indent transport">
                        <span class="icon i-transport no-bg-color"></span>
                        <p class="no-margin ">Gratis verzending binnen heel Nederland</p>
                    </div>
                    <div class="feature indent calender">
                        <span class="icon i-calender no-bg-color"></span>
                        <p class="no-margin ">30 dagen retourrecht. Niet goed? Geld terug!</p>
                    </div>
                    <div class="feature indent pay">
                        <span class="icon i-pay no-bg-color"></span>
                        <p class="no-margin ">Achteraf betalen, koop vandaag betaal over 14 dagen</p>
                    </div>



    </div>
</div>  

Bestel binnen

5小时6分钟

我在回族人中胜过了morgen al

var lang_小时数='uren'；
变量langu_hour='uur'；
var lang_minutes='minuten'；
var lang_minute='minute'；
var lang_seconds='seconden'；
var langu_second='seconde'；
var Counter=Class.create（）；
计数器。原型={
剩余时间：0，
继续计数：1，
间隔：空，
/* 
*初始化-配置
*/  
初始化：函数（t）{
这个时间=t；
this.interval=setInterval（“countdown.timer（）”，1000）；
//这个.timer（）；
},
计时器：函数（）{
这是倒计时（）；
此.format_output（）；
},
倒计时：函数（）{
如果（this.time_left=1？'en'：''）+seconds+''+（seconds==1？lang_second:lang_seconds）；
}否则{
$（“倒计时”）.remove（）；
}
}
};
var倒计时=新计数器（18464）；
荷兰免费提供
30达根再融资。尼特去了？格尔德·特鲁格
超过14达金

---

如何使用javascript始终显示3个usp？

您可以检查窗口宽度，并根据条件启用或禁用div

var-width=$（窗口）.width（）；
如果（宽度<“您要设置的平板电脑宽度”）
{
$（“您的div元素”）.fadeOut（）；
}
其他的
{
$（“您的div元素”）.fadeIn（）；
}

尝试溢出：隐藏。当窗口宽度很小时，您的usp将不会覆盖。

我的想法：您可以计算“要素”类的总宽度。然后检查它加上div#倒计时是否过大

$("document").ready(function(){
    var twidth = 0;
    $(".main-container .feature").each(function(){
        twidth += $(this).width();
    });
    if(twidth + $("#countdown").width() > $(".main-container").width())
        $("#countdown").hide();
})

---

您可以使用外径（）而不是宽度（）来获得更好的效果

为什么不尝试使用响应式CSS：

例如：

@media (max-width: 420px) {
    .the-div {
        display: none;
    }
}

---

你能把css放进去吗？这样我就可以检查你的css有什么问题了

@media (max-width: 420px) {
    .the-div {
        display: none;
    }
}