Html Grid Using Ul li

html
css

2014-02-11 96 views -1 likes

-1

我需要帮助。 Plz见附图。我正在尝试使用任何高度的HTML ul li来制作网格。我正在试图将一列接一列地放在一起，没有任何空白。但不幸的是，第四列将走低。怎么修？Html Grid Using Ul li

enter image description here

 ul.brik{ 
    margin-left:-5px; 
     } 

     ul.brik li{ 
     display:inline-block; 
     width:32.5%; 
     margin-left:5px; 
     vertical-align:top; 
     }

来源

2014-02-11 Sultan

请问您能否包含您的代码？ –

将您的代码包含在帖子中，并尽可能在JSFiddle中复制问题。我们不是心灵的！ – Ennui

很明显，您正在制作水平线。使其垂直..它会工作。 –

回答

假设你不介意你的排序列垂直而非水平，而你不需要这个工作在旧的浏览器：

display: flex; 
flex-flow: column wrap;

我们拥有一些其他flexbox properties应该得到你的布局。

来源

2014-02-11 14:58:50

发生这种情况，因为每个ul出现在它是目前在该行的顶部，一旦一个换行符介绍，接下来ul将出现在你看到它。

要解决这个问题，请将每列分开div，并将其放入ul。

您需要将div的显示设置为inline-block，以使它们水平堆叠。

来源

2014-02-11 14:47:00 Kraylog

我不太确定你在找什么。它看起来像你有更多的div它们分开，也是我认为你的目的，你可以添加一个

min-height:50px; 
max-height:250px 
overflow:hidden; 
/* you could also try*/ 
position:absolute; 
top:20px; 
left:20px;

来源

2014-02-11 14:52:42 173901

Html Grid Using Ul li

回答

相关问题