如何用CSS制作浮顶？

Question

我知道CSS只支持float属性的左右值,但有没有一种技术来实现浮动顶部？我会尽力解释.我有以下代码:

<div style="float:left">
<div style="float:left">
<div style="float:left">
....

使用此代码,每个div都会向左浮动,直到达到页面的右边界.我想在垂直方向上做同样的事情,这样每个div都放在前一个div的底部,然后,当达到页面的下限时,会创建一个新列.有没有办法只使用CSS(也许编辑HTML代码)？

Answer 1

只需使用vertical-align:

.className {
    display: inline-block;
    vertical-align: top;
}

Answer 2

使用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之间分发内容.

Answer 3

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

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li> 
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

您可以使用以下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的博客文章中阅读更多相关内容

Answer 4

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

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

<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>

Answer 5

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

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

HTML:

<div id="container">
<div class="object"><div class="content">one</div></div>
<div class="object"><div class="content">two</div></div>
<div class="object"><div class="content">three</div></div>
<div class="object"><div class="content">four</div></div>
<div class="object tall"><div class="content">five</div></div>
<div class="object"><div class="content">six</div></div>
<div class="object"><div class="content">seven</div></div>
<div class="object"><div class="content">eight</div></div>
</div>

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应该帮助一些人.