在动态大小的DIV容器中使用HTML UL LIST而不会丢失内容

Question

我正在创建动态<ul>列表，有时会有10个<li>个项目，有时还有50个<li>个项目。我需要将此列表放在<div>容器内（由于响应式设计，其高度/宽度会有所不同）。让我告诉你一些例子：

这就是我所拥有的：

<style>
    .container{
        border:1px solid #ccc;
        height: 150px;
        width: 500px;
    }
</style>
<div class="container">
    <ul>
        <li>test sdfsdfs</li>
        <li>testsdf sdfsd</li>
        <li>test sdfsdfs</li>
        <li>testsdf sdfsd</li>
        <li>test sdfsdfs</li>
        <li>testsdf sdfsd</li>
        <li>test sdfsdfs</li>
        <li>testsdf sdfsd</li>
        <li>test sdfsdfs</li>
        <li>testsdf sdfsd</li>
    </ul>
</div>

这将导致以下结果：

我需要列表项始终保留在div容器内，因此在上面的场景中，剩余的列表项（容器外的列表项）应继续显示在右侧，直观地创建两列。

限制：

• HTML需要保持不变，但添加更多列表项
除外
• .container宽度和高度是动态的，因此它们可以变化。
• 如果容器太小而列表不能显示在另一列上，则其余列表将隐藏。
• 没有插件（即Bootstrap，Foundation等）。

如果您需要更多详细信息，请与我们联系。谢谢您。

Answer 1

您可以使用display:flex property和In [27]: df['Label'] = np.where(df['Search term'].str.contains('|'.join(brand_terms)), ....: 'Brand', ....: np.where(df['Search term'].str.contains('|'.join(footwear_terms)), ....: 'Footwear', ....: '--')) In [28]: df Out[28]: Search term Label 0 awesomebrand inc Brand 1 guy boots Footwear 2 ectoplasm -- 执行此操作，如果您给出一定的高度，一旦内容到达flex-direction: column;父项的底部，您将获得一个新列。

以下是有关浏览器支持的一些信息：http://caniuse.com/#feat=flexbox

以下是您的演示：

display: flex;

.container {
  border: 1px solid #ccc;
  height: 150px;
  width: 500px;
}

.container > ul
{
  display: flex;
  flex-flow: column wrap;
  height: inherit;
  width: inherit;
  margin:0;
}

.container > ul > li
{
  flex: 0 0 auto;
}