html - 使用 CSS 从底部到顶部 float div？

Question

我正在显示一组需要包装在响应式布局中的选项卡。是否可以将它们包裹起来，使其与底部对齐？

这是他们目前的包装方式:

我想消除顶行下方的空间，以便顶部只有 1 个选项卡，底部只有 4 个选项卡。这是一个响应式布局，因此需要流畅。我正在寻找纯 CSS 解决方案。

这是我的代码:

#tabs {
    border:1px solid red;
    padding:0 5px 5px 5px;
}

#tabs ul {
    list-style:none;
    margin:0;
    padding:0;
}

#tabs li {
    float:left;
    margin:5px 0 0 -1px;
    border:1px solid #ccc;
    padding:5px 10px;
}

<div id="tabs">
    <ul>
        <li><a href="#"><span>Tab 1</span></a></li>
        <li><a href="#"><span>Tab 2</span></a></li>
        ... etc ...
     </ul>
    <div style="clear:both;"></div>
</div>

这是一个 jsfiddle:http://jsfiddle.net/PGypn/

Answer 1

您可以使用此 CSS3 属性:flex-wrap: wrap-reverse。

#tabs ul {
    display: flex;
    flex-wrap: wrap-reverse;
    list-style:none;
    margin:0;
    padding:0;
}
#tabs li {
    margin:5px 0 0 -1px;
    border:1px solid #ccc;
    padding:5px 10px;
    
}
#tabs {
    border:1px solid red;
    padding:0 5px 5px 5px;
}

<div id="tabs">
    <ul>
        <li><a href="#"><span>Tab 0</span></a>
        </li>
        <li><a href="#"><span>Tab 1</span></a>
        </li>
        <li><a href="#"><span>Tab 2</span></a>
        </li>
        <li><a href="#"><span>Tab 3</span></a>
        </li>
        <li><a href="#"><span>Tab 4</span></a>
        </li>
        <li><a href="#"><span>Tab 5</span></a>
        </li>
        <li><a href="#"><span>Tab 6</span></a>
        </li>
        <li><a href="#"><span>Tab 7</span></a>
        </li>
        <li><a href="#"><span>Tab 8</span></a>
        </li>
        <li><a href="#"><span>Tab 9</span></a>
        </li>
    </ul>
</div>

fiddle