使用CSS从下到上浮动div？ [英] Floating divs from bottom to top using CSS?

问题描述

我正在显示一组需要以响应式布局封装的标签。是否有可能将它们包装起来，以便它们与底部对齐？

以下是它们当前的包装方式：

顶行下方的空间，以便顶部只有一个标签，底部有四个标签。这是一个响应式布局，所以它需要流畅。我正在寻找一个纯粹的CSS解决方案。

以下是我的代码：

  #tabs {
 border：1px纯红色; 
 padding：0 5px 5px 5px; 
} 
 
 #tabs ul {
 list-style：none; 
保证金：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>标签1< / span>< / a>< / li> 
< li>< a href =＃>< span>标签2< / span>< / a>< / li> 
 ...等... 
< / ul> 
< div style =clear：both;>< / div> 
< / div> 
  

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

解决方案

你可以使用这个CSS3属性： flex-wrap：wrap-reverse 。
$ b

  #tabs ul {display：flex; flex-wrap：wrap-reverse;列表样式：无;余量：0; padding：0;}＃tabs li {margin：5px 0 0 -1px; border：1px solid #ccc;填充：5px 10px; } #tabs {border：1px纯红色; padding：0 5px 5px 5px;}  

< div id = 翼片 > < UL> < li>< a href =＃>< span>标签0< / span>< / a> < /锂> < li>< a href =＃>< span>标签1< / span>< / a> < /锂> < li>< a href =＃>< span>标签2< / span>< / a> < /锂> < li>< a href =＃>< span>标签3< / span>< / a> < /锂> < li>< a href =＃>< span>标签4< / span>< / a> < /锂> < li>< a href =＃>< span>标签5< / span>< / a> < /锂> < li>< a href =＃>< span>标签6< / span>< / a> < /锂> < li>< a href =＃>< span>标签7< / span>< / a> < /锂> < li>< a href =＃>< span>标签页8< / span>< / a> < /锂> < li>< a href =＃>< span>标签9< / span>< / a> < /锂> < / ul>< / div>

$ b

小提琴

I'm displaying a set of tabs that need to wrap in a responsive layout. Is it possible to wrap them so that they align to the bottom?

Here's how they currently wrap:

I would like to eliminate the space below the top row so that there would be only 1 tab on the top, and 4 tabs on the bottom. This is a responsive layout, so it needs to be fluid. I'm looking for a pure CSS solution.

Here's my code:

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

Here's a jsfiddle: http://jsfiddle.net/PGypn/

解决方案

You can use this CSS3 property : 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

这篇关于使用CSS从下到上浮动div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！