Question

我在100％w容器中有4个内联块。当我重新调整浏览器以溢出此容器时，添加浏览器会在底部添加新行，但我希望新行位于顶部，无论如何都要这样做吗？ / p>

**Full browser width:**
*** *** *** ***
*1* *2* *3* *4*
*** *** *** ***

**Overflow**

Doing this:

*** *** ***
*1* *2* *3* 
*** *** *** 

***
*4*
***

I want this:
***
*4*
***

*** *** ***
*1* *2* *3* 
*** *** ***

这是我的代码：

HTML

<div class="cajonera">
        <nav class="contenedorWidgets">
            <ul>
                <li>image1</li><li>image2</li><li>image3</li><li>image4</li>
            </ul>
        </nav>
    </div>

CSS

 .cajonera{
    width: 100%;
    height: 100%;
    background-color: #040404;
    position: absolute;
}
.contenedorWidgets{
    position: absolute;
    bottom:63px;
    margin: 0 auto;
    width: 100%;

}

.contenedorWidgets ul{
padding: 0;
margin:0;
list-style-type: none;
list-style: none;

}

.contenedorWidgets ul>li {
    list-style: none;
    margin-left: -4px;
    text-align: center;
 }

谢谢：）

Answer 1

您可以使用Flexible Box Layout Module和 flex-direction: column-reverse 来实现这一目标，但目前它并不适用于所有浏览器...或者可能，规格确实发生了变化过去2或3年太多次了^^

显然在IE8中不起作用，并且在IE9，IE10，Opera，Firefox 21/22中进行测试...... Demo for WebKit

Answer 2

好吧，我很难说这是一个很好的解决方案，它非常“hacky”但是你走了：

<div class="container">
        <nav class="widgets">
            <ul>
                <li><img src="http://placehold.it/50x50"></li>
                    <li><img src="http://placehold.it/50x50"></li>
                        <li><img src="http://placehold.it/50x50"></li><li><img src="http://placehold.it/50x50"></li>
            </ul>
        </nav>
    </div>

CSS（我使用媒体查询推送第4个<li>项目）：

.container{
    width: 100%;
    height: 100%;
    background-color: #eee;
    position: absolute;
}
.widgets{
    position: absolute;
    bottom:63px;
    margin: 0 auto;
    width: 100%;

}
.widgets ul{
padding: 0;
margin:0;
list-style-type: none;
list-style: none;

}

.widgets ul>li {
    display:inline-block;
    margin-left: 10px;
 }
@media (max-width: 400px) {
.widgets ul li:nth-child(4n) {
    display:block;
    position:absolute;
    top:-70px;
}
}

在这里演示：http://jsfiddle.net/MBxxt/2/

Answer 3

您可以使用浮动和清除效果选择器将帮助您浮动或不浮动元素，并且应该清除以绘制新线。

http://codepen.io/gcyrillus/pen/aCDhm

对于列表或4个项目，此CSS规则将执行此操作。

ul {
  padding:0;
  margin:2em;
  list-style-type:none;
  border:dotted;
  display:inline-block;
}
ul:before {
  content:'';
  float:left;
  height:50px;
  margin:4px 0;
}
li {
  margin:3px;
}
li:first-child {
  clear:left;
}
li:not(:last-child) {
  float:left;
}

何时应用此规则？

每当您想要线路中断时，请使用mediaquery和屏幕宽度。

请参阅此演示，了解如何为您编写规则。决定你自己保持在最顶层，根据屏幕宽度打破线条。

你可以保持2在顶部不浮动，并有2个其他赌注，绘制3行。（乐高游戏）

内联块如何包装到顶线

3 个答案: