如何用CSS制作浮顶？

使用CSS的唯一方法是使用CSS 3,它不适用于每个浏览器(只有最新一代,如FF 3.5,Opera,Safari,Chrome).

确实,使用CSS 3,这是一个非常棒的属性:你可以像这样使用列数:

#myContent{
  column-count: 2;
  column-gap: 20px;
  height: 350px;
}

如果#myContent正在包装你的其他div.

更多信息:http://www.quirksmode.org/css/multicolumn.html

正如您可以在那里阅读的那样,使用它有严重的局限性.在上面的示例中,如果内容溢出,它将仅添加另一列.在mozilla中,您可以使用column-width属性,该属性允许您根据需要将内容划分为多个列.

否则,您必须在Javascript或后端的不同div之间分发内容.

Hugogi Raudel提出了一种有趣的方法来实现这一目标CSS.假设这是我们的HTML标记:

  
1
  
2
  
3
  
4
  
5
 
  
6
  
7
  
8
  
9

您可以使用以下CSS代码实现3行列:

li:nth-child(3n+2){
  margin: 120px 0 0 -110px;
}

li:nth-child(3n+3) {
  margin: 230px 0 0 -110px;
}

这是最终结果:

我们在这里做的是为行中的每个项添加适当的余量.此方法限制是您必须确定列行计数.它不会是动态的.我确定它有用例,所以我在这里包含了这个解决方案.

这是一个现场演示:http: //codepen.io/HugoGiraudel/pen/DoAIB

您可以在Hugo的博客文章中阅读更多相关内容

没有float:top,只有float:left和float:right

如果您希望将div显示在彼此之下,则必须执行以下操作:

我试着这只是为了好玩 - 因为我也想要一个解决方案.

小提琴:http://jsfiddle.net/4V4cD/1/

HTML:

one
two
three
four
five
six
seven
eight

CSS:

#container { 
width:300px; height:300px; border:1px solid blue;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.object {
float:left;
width:96px;
height:96px;
margin:1px;
border:1px solid red;
position:relative;
}
.tall {
width:196px;
}

.content {
padding:0;
margin:0;
position:absolute;
bottom:0;
left:0;
text-align:left;
border:1px solid green;
-webkit-transform-origin: 0 0;
transform:rotate(-70deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */
}

我可以看到这将适用于更高/更宽的div.只需要侧身思考.我想定位将成为一个问题.transform-origin应该帮助一些人.