css - 位置固定的 div 不会溢出视口(viewport)

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 似乎可以解决问题