隱藏孩子 <div> s為父div縮小？

Question

我正在嘗試使用jqueryUI滑塊在我正在制作的Web應用程序上編寫放大/縮小功能。

當我的父div縮小太多時，我很難處理，並且使其子容器痙攣。

   <div class="puck originator inline-block" style="width: 310.5px; left: 0px;">
    <div class="conflicted inline-block originator">
        <div class="right-number">I should stay</div>
        <div class="left-number">I should stay</div>
        <div class="middle-number">I Should disapper</div>
    </div>
</div>

這是我的代碼的相關部分http://jsfiddle.net/aQKwE/

基本上我有使用jquery滑塊縮小的父div（類'puck'）。 對於這段代碼，我只使用了一個文本框，但同樣的想法。

當我縮小div時，包含的div會粘在一起並且非常亂碼。

我希望能夠移除中間的孩子div，當它變得狹窄，留下左右兒童div占據所有的空間

此外，如果它在那之后變得狹窄，我想刪除正確的div，只留下左邊。

最后，我希望能夠刪除所有內容，以便只顯示父級的背景。

有沒有辦法輕松地做到這一點，最好是通過CSS？ 我不想寫更多的javascript代碼來在每個子div上設置'display：none'，因為看起來有些CSS規則應該處理這個問題。

有任何想法嗎？

Answer 1

CSS中沒有任何邏輯可以處理這樣的事情。 您可以根據視口大小設置規則，但在這種情況下無效。

我用這段代碼更新了你的jsfiddle ，這樣你就可以測試它並看看你的想法，但實質上我只是在你的javascript函數中添加了一些檢查，以便根據提交的寬度進行隱藏。

    var newwidth = $('#text').val();
    $(".middle-number").show();   
    $(".right-number").show();  
    if (newwidth < 280) {
         $(".middle-number").hide();   
    }
    if (newwidth < 180) {
         $(".right-number").hide();   
    }
    $('.puck').css('width',newwidth);