让孩子在一定高度的div内包装 [英] Make children wrap inside a div with a certain height

问题描述

如果我在父元素中有一组子元素，并且父元素被设置为某个高度小于所有添加的列表元素的高度，则默认情况下，子元素只会直接流出父元素：

http://jsfiddle.net/BxJLH/

 < ul> 
< li>< a href ='＃'>项目< / a>< / li> 
< li>< a href ='＃'>项目< / a>< / li> 
< li>< a href ='＃'>项目< / a>< / li> 
< li>< a href ='＃'>项目< / a>< / li> 
< li>< a href ='＃'>项目< / a>< / li> 
< li>< a href ='＃'>项目< / a>< / li> 
< li>< a href ='＃'>项目< / a>< / li> 
< li>< a href ='＃'>项目< / a>< / li> 
< li>< a href ='＃'>项目< / a>< / li> 
< li>< a href ='＃'>项目< / a>< / li> 
< / ul> 
  

但是是否可以让孩子们换行在父母的内部？以jsfiddle为例，我们可以创建两个列表项目，第一个'列'中有7 li s，而 3

更新

希望div保持142px的高度，并让孩子在里面形成2列。 我正在尝试创建一个如下所示的菜单，我只是觉得能够循环利用数据库中的一举一动。

JSFiddle

我使用了

  .unordered-list {
 -moz-columns：2 142px; 
 -webkit-columns：2 142px; 
列：2 142px; 
 
  

编辑：

看看这个 JSFiddleUpdated
唯一的问题是，UL的CSS可能不会申请li列在第二栏。

让我知道这是否适用于您。

If I have a set of children elements in a parent element, and the parent is set to a certain height that's less than all of the list items added up, by default it appears the children just flow straight out of the parent:

http://jsfiddle.net/BxJLH/

<ul>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
</ul>

But is it possible to make it so the children wrap and all stay inside the parent? Using the jsfiddle as the example, could we create two 'columns' of list items, with 7 lis in the first 'column', and 3 in the second?

update

I want the div to stay 142px heigh, and the children to form 2 columns inside it. I'm trying to create a menu as seen here, and I just think it would be cool to be able to loop the li's from the database in one fell swoop.

解决方案

Look at this JSFiddle

I used

.unordered-list {
    -moz-columns: 2 142px;
    -webkit-columns: 2 142px;
    columns: 2 142px;
}

EDIT:

Look at this JSFiddleUpdated The only problem is, the CSS of UL may not apply for the li items in 2nd column.

Let me know if this doesn't work for you.

这篇关于让孩子在一定高度的div内包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！