我怎样才能使用CSS的浮动顶部?

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

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

有了这个代码,每个div都浮动到左边,直到达到页面的正确限制。 我想做同样的事情,但垂直,以便每个股利被放置在前一个底部,然后,当达到页面的底部限制,创build一个新的列。 有没有办法做到这一点只使用CSS(也许编辑HTML代码)?

唯一的方法就是使用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中,您可以使用列宽属性,允许您根据需要将内容分成多个列。

否则,你将不得不在不同的div之间在Javascript或后端分配内容。

只需使用vertical-align

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

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

这是最终的结果:
在这里输入图像说明
我们在这里做的是为该行中的每个项目添加适当的边距。 这种方法的限制是你必须确定列的行数。 这不会是dynamic的。 我确定它有用例,所以我在这里包含了这个解决scheme。

  • 这是一个现场演示: http : //codepen.io/HugoGiraudel/pen/DoAIB
  • 您可以在Hugo的博客文章中阅读更多内容

没有float:top ,只有float:leftfloat:right

如果你想显示下面的div你必须做:

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

我试过这个只是为了好玩 – 因为我也想要一个解决scheme。

小提琴: 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工作。 只需要侧身思考。 我想象定位将成为一个问题。 转型起源应该帮助一些人。

我认为完成你所谈论的最好的方法是有一组div,这将是你的专栏,并按照你所描述的方式填充。 然后用你正在谈论的内容垂直填写这些div。

 <div class="block blockLeft">...</div> <div class="block blockRight">...</div> <div class="block blockLeft">...</div> <div class="block blockRight">...</div> <div class="block blockLeft">...</div> <div class="block blockRight">...</div> block {width:300px;} blockLeft {float:left;} blockRight {float:right;} 

但是如果div元素的数量不是固定的,或者你不知道它有多less,你仍然需要JS。 使用jQuery :even:odd

我只是用JQuery做的。

我在Firefox和IE10testing。

在我的问题项目有不同的高度。

 <!DOCTYPE html> <html> <head> <style> .item { border: 1px solid #FF0; width: 100px; position: relative; } </style> <script src="jquery-1.10.1.min.js"></script> </head> <body> <script> function itemClicked(e) { if (navigator.appName == 'Microsoft Internet Explorer') e.removeNode(); else e.remove(); reposition(); } function reposition() { var px = 0; var py = 0; var margeY = 0; var limitContainer = $('#divContainer').innerHeight(); var voltaY=false; $('#divContainer .item').each(function(key, value){ var c = $(value); if ((py+c.outerHeight()) > limitContainer) { px+=100; margeY-=py; py=0; voltaY=true; } c.animate({ left:px+'px', top:margeY+'px' }); voltaY=false; py+=c.outerHeight(); }); } function addItem() { $('#divContainer').append('<div class="item" style="height: '+Math.floor(Math.random()*3+1)*20+'px;" onclick="itemClicked(this);"></div>'); reposition(); } </script> <div id="divMarge" style="height: 100px;"></div> <div id="divContainer" style="height: 200px; border: 1px solid #F00;"> <!--div class="item"></div--> </div> <div style="border: 1px solid #00F;"> <input type="button" value="Add Item" onclick="addItem();" /> </div> </body> </html> 

为了达到这个目的,使用CSS3,只要我正确理解你,就不会那么困难。 让我们说,HTML DIV的看起来像这样:

 <div class="rightDIV"> <p>Some content</p> <div> <!-- --> <div class="leftDIV"> <p>Some content</p> </div> 

CSS将如下所示。 下面的CSS会做的是让你的DIV执行一个左边的浮动,它将“粘”到父DIV元素的左边。 然后,您使用“top:0”,并将其“粘贴”到浏览器窗口的顶部。

  #rightDIV { float: left top: 0 } #leftDIV { float: right; top: 0 } 

这是一个在FF,Opera,Chrome中运行(几乎完美)的解决scheme:

  <style> html {height:100%} p {page-break-inside:avoid;text-align:center; width:128px;display:inline-block; padding:2px;margin:2px;border:1px solid red; border-radius: 8px;} a {display:block;text-decoration:none} b {display:block;color:red} body { margin:0px;padding:1%; height:97%; /* less than 98 b/c scroolbar */ -webkit-column-width:138px; -moz-column-width:138px; column-width:138px; } </style> <body> <p><b>title 1</b> <a>link 1</a> <a>link 2</a> <a>link 3</a> <a>link 4</a> </p> <p><b>title 2</b> <a>link 1</a> <a>link 2</a> <a>link 3</a> <a>link 4</a> <a>link 5</a> </p> </body> 

诀窍是P上的“page-break-inside:avoid”和BODY上的列宽。 它带有dynamic列数。 A中的文本可能是多行的,块可能有不同的高度。

也许有人有东西的边缘和IE浏览器

你也许可以用兄弟select器做一些事情,例如:

 div + div + div + div{ float: left } 

没有尝试过,但这可能会漂浮第四个div,也许做你想做的事情。 再次不完全支持。

这个技巧对我来说就是改变divalignment期间的写作模式。

 .outer{ /* Limit height of outer div so there has to be a line-break*/ height:100px; /* Tell the browser we are writing chinese. This makes everything that is text top-bottom then left to right. */ writing-mode:vertical-lr; } .outer > div{ /* float:left behaves like float:top because this block is beeing aligned top-bottom first */ float:left; width:40px; /* Switch back to normal writing mode. If you leave this out, everything inside the div will also be top-bottom. */ writing-mode:horizontal-tb; } 
 <div class="outer"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>one</div> <div>two</div> <div>three</div> <div>four</div> </div> 

这适用于ul

 display:flex; flex-direction:column; flex-wrap:wrap;