0

我在 100%w 容器中有 4 个内联块。当我调整浏览器的大小以溢出此容器时，添加浏览器会在底部添加新行，但我希望将新行放在顶部，有什么办法吗？

**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;
 }

谢谢 ：）

4

3 回答 3

1

您将能够使用灵活框布局模块来做到这一点，flex-direction: column-reverse但目前它不适用于所有浏览器......或者它可能在过去 2 或 3 年中确实更改了太多次 ^^

显然在 IE8 中不起作用 - 并且要在 IE9、IE10、Opera、Firefox 21/22 中进行测试... WebKit 的演示

于 2013-06-15T10:54:27.923 回答
0

好的，我几乎没有把它吹捧为一个好的解决方案，它非常“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/

于 2013-06-15T10:15:42.433 回答
0

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

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 条线。（乐高游戏）

于 2013-06-15T13:35:30.657 回答