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属性将它们强制为一行 - 请参阅下面的演示：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如果你想从右到左设置element s的方向，你可以使用scale transform使用一个很好的技巧 - 参见下面的演示：

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

Answer 2

Flexbox 的一个不错的属性：flex-wrap: nowrap（这是默认值）：Flex容器不允许其flex项占用2行以上并强制它们即使宽度的总和大于其父级，也会溢出容器要从右到左显示它们，从左侧的视口中显示它，就像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>

允许绝对容器宽度溢出屏幕宽度

2 个答案: