Question

如果我有一个固定div的位置并且我应用了一个左偏移，这样就没有足够的空间让它完全显示在屏幕上而不是屏幕溢出并导致水平滚动条div只会减少在宽度而不是。

我不希望div宽度发生变化，因为这会导致其中的项目换行。我发现我可以通过在div上设置显式宽度来解决这个问题，但这并不是一个解决方案，因为每次项目的数量都是动态的。

有没有办法让它如果不适合屏幕，它会偏离屏幕的一侧，而不是在没有设置宽度的情况下调整大小？

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

固定位置div不会溢出视口

1 个答案: