我怎样才能使用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:left和float: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;
