允許絕對容器寬度溢出屏幕寬度

Question

我有一個絕對位於屏幕右下方的容器。

width和height設置為自動。

容器內部是元素，它們被設置為inline-block 。 想象一下facebook彈出的聊天窗口，這正是我所擁有的。

當我添加元素時，它按預期工作，在屏幕右側顯示彼此相鄰。 問題是，當我添加足夠的，並且容器達到屏幕的寬度時，它們會換行。 而不是繼續留在屏幕外面。

我怎樣才能做到這一點？

<div class='container'>
    <div class='element'></div> 
    <!-- Adding too many of these will cause them to wrap
     above each other instead of flowing off the left side of the screen --> 
</div>

.container{
    position: absolute;
    right: 0:
    bottom: 0;
    width: auto;
    height: auto;
}

.element{
    width: 300px;
    height: 500px;
}

Answer 1

我們的想法是讓你的element inline-block ，然后使用white-space: nowrap屬性將它們強制成一行 - 請參閱下面的演示：

 .container{ position: absolute; right: 0; bottom: 0; width: auto; height: auto; white-space: nowrap; } .element{ width: 300px; height: 500px; display: inline-block; border: 1px solid red; } 

 <div class='container'> <div class='element'>element 1</div> <div class='element'>element 2</div> <div class='element'>element 3</div> <div class='element'>element 4</div> </div> 

如果你想從右到左設置element的方向，你可以使用scale transform一個很好的技巧 - 見下面的演示：

 .container{ position: absolute; right: 0; bottom: 0; width: auto; height: auto; white-space: nowrap; transform: scaleX(-1); } .element{ width: 300px; height: 500px; display: inline-block; border: 1px solid red; transform: scaleX(-1); } 

 <div class='container'> <div class='element'>element 1</div> <div class='element'>element 2</div> <div class='element'>element 3</div> <div class='element'>element 4</div> </div> 

Answer 2

Flexbox的一個不錯的屬性：使用flex-wrap: nowrap （默認值）：flex容器不允許其flex項占用2+行，並且即使它們的寬度總和也會強制它們溢出容器比他們的父母大。
要從右到左顯示它們，從左側的視口中顯示它，就像flex-direction: row-reverse一樣簡單flex-direction: row-reverse 。
inline-block優勢：項目之間沒有空格/間隙（通常為4px）

 .container{ position: absolute; right: 0; bottom: 0; display: flex; flex-direction: row-reverse; width: auto; height: auto; } .element{ width: 300px; height: 200px; /* flex: 0 0 300px; not needed */ border: 1px solid red; } 

 <div class='container'> <div class='element'>element 1</div> <div class='element'>element 2</div> <div class='element'>element 3</div> <div class='element'>element 4</div> </div>