Question

我有一个网页，当用户向下钻取时，该网页从左到右依次添加各种大小的固定宽度面板（flex: none）。当面板到达（或将超出）页面的末尾时，我希望第一个面板（及其后的面板）向左“滚动”（可以接受隐藏的溢出，可以看到部分内容）

先添加第一个面板，然后添加两个等，然后按左向左对齐

=============================================================
=                                                            =
= -----------  ----------- -----------  -----------          =
= |         |  |         | |         |  |         |          =
= |   ONE   |  |   TWO   | |  THREE  |  |  FOUR   |          =
= |         |  |         | |         |  |         |          =
= -----------  ----------- -----------  -----------          =
=                                                            =
==============================================================

然后，当添加五个时，它将超出页面的末尾，因此面板ONE滚动到了视线之外（隐藏溢出是可以的）

=============================================================
=                                                           =
=--    -----------  ----------- -----------  -----------    =
=  |   |         |  |         | |         |  |         |    =
=  |   |   TWO   |  |   THREE | |  FOUR   |  |  FIVE   |    =
=  |   |         |  |         | |         |  |         |    =
=--    -----------  ----------- -----------  -----------    =
=                                                           =
=============================================================

相反，当移除面板五（或其他任何面板）时，一个应该回到视图中。

到目前为止，我有这个：

<div class="container-fluid">
  <div class="panel-container">
    <div class="panel">
      1 of 4
    </div>
    <div class="panel">
      2 of 4
    </div>
    <div class="panel">
      3 of 4
    </div>

  </div>  
</div>


.panel-container {
    justify-content: flex-end;
    margin-top: 1rem;
    width: 100%;
    display: flex;
    width: fit-content;
}

.panel {
  border: solid 1px #6c757d;
  padding: 10px;
  flex: none;
  width:300px;
}

我也尝试过：

.panel-container {
    margin-top: 1rem;
    justify-content: flex-end;
    width: auto;
    right: inherit;
    display: inline-flex;
}

My jsFiddle

我的css仅在不设置最后一个面板的宽度时才起作用，但是宽度会扩展以适应剩余空间，这不是我想要的。更喜欢使用flex box的css解决方案，但是如果那不可能，那么任何可行的方法都将不胜感激

任何帮助将不胜感激！

Answer 1

当然，最后这是如此简单（骑自行车清除心灵之后）。

margin-right: auto;最后一个孩子。我将其应用于所有孩子，以防万一那里还有其他内容（例如加载微调框等，以防止右边距折叠）

.panel-container {
  display: flex;
  justify-content: flex-end;
}

.panel {
  flex: 0 0 300px;
  border: solid 1px #6c757d;
  padding: 10px;
}

    .panel-container > :last-child {
        margin-right: auto;
    }

updated jsfiddle

Answer 2

我知道，唯一的方法是使用JavaScript的.scrollLeft：

https://codepen.io/agakesik/pen/WNrEQdP

document.getElementsByClassName('panel-container').scrollLeft = 9999999;

Answer 3

您的代码太多了。简化它。

TYPE Doc IS REF CURSOR;
Doc := PKG_search.Retrievedata(IN_Id);

.panel-container {
  display: flex;
  justify-content: flex-end;
}

.panel {
  flex: 0 0 300px;
  border: solid 1px #6c757d;
  padding: 10px;
}

revised fiddle

水平向左滚动

3 个答案: