位置固定div不會溢出視口

Question

如果我有一個位置固定的div，並且我應用了一個左偏移，以便沒有足夠的空間讓它完全顯示在屏幕上而不是屏幕溢出並導致水平滾動條的div只是減少寬度。

我不想div寬度改變，因爲這會導致其中的項目包裝。我發現我可以通過在div上設置一個明確的寬度來解決這個問題，但這不是一個真正的解決方案，因爲每次都是動態的。

有沒有一種方法，如果它不適合在屏幕上它只會離開屏幕的一邊，而不是調整大小而不設置寬度？

JSFiddle

HTML：

<button type="button" id="btn">Click</button> 

CSS：

.tooltip { 
    position: fixed; 
    padding: 10px 5px; 
    border: solid 1px #ccc; 
    left: 0px; 
} 
.tooltip .item { 
    float: left; 
    margin: 0 5px; 
} 

JS：

$(document).ready(function() { 
    $('#btn').click(function() { 

     window_width = $(window).width(); 
     offset = window_width - 642 + 200; 

     html = '<div class="tooltip">'; 
     html+= '<div class="item"><img src="http://www.placecage.com/200/200" alt="" /></div>'; 
     html+= '<div class="item"><img src="http://www.placecage.com/200/200" alt="" /></div>'; 
     html+= '<div class="item"><img src="http://www.placecage.com/200/200" alt="" /></div>'; 
     html+= '<div style="clear:both;"></div>'; 
     html+= '</div>'; 

     $('body').append(html); 

     $('.tooltip').css({left: offset }) 
    }); 
}); 

Answer 1

應用顯示錶.tooltip似乎這樣的伎倆