我知道CSS只支持浮点属性的左值和右值，但是有没有实现浮动顶点的技巧？我会尽力解释。我有以下代码：如何使用CSS创建浮动顶部？
<div style="float:left">
<div style="float:left">
<div style="float:left">
....
使用此代码，每个div都浮动到左侧，直到达到页面的右侧限制。我想要做同样的事情，但垂直，以便每个股利被放置在前一个底部，然后，当达到页面的底部限制，一个新的列被创建。有没有一种方法可以只使用CSS（也可以编辑HTML代码）？
唯一能用CSS做到这一点的方法是使用CSS 3，它不会在每个浏览器（只有FF 3.5，Opera，Safari，Chrome等最新一代）上工作。
事实上用CSS 3有这个真棒属性：列数，您可以使用像这样：如果#myContent披着你的其他的div
#myContent{
column-count: 2;
column-gap: 20px;
height: 350px;
}
。
此处了解详情：http://www.quirksmode.org/css/multicolumn.html
正如你可以看到那里，在使用这种严重的局限性。在上面的例子中，如果内容溢出，它将只添加到另一列。 在mozilla中，您可以使用列宽属性，它允许您根据需要将内容分成尽可能多的列。
否则，您将不得不在不同div之间以Javascript或后端分发内容。
没有float:top，只有float:left和float:right
如果你想显示对方下方的div你必须做的：
<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>
我认为最好的方式来完成你在做什么谈论的是有一套div将成为你的专栏，并按照你描述的方式填充这些div。然后用你正在谈论的内容垂直填写这些div。
您也许能够做一些与同胞选择例如为：
div + div + div + div{
float: left
}
没有尝试过，但是这可能漂浮在4格左也许做你想要什么。再次不完全支持。
这不是我正在寻找的，但它是一个非常有趣的效果:) – mck89 2009-12-04 15:29:52
<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的元素数量不固定，或者您不知道它有多少，您仍然需要JS。使用jQuery :even,:odd
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://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的宽工作。只需要侧身思考。我想象定位会成为一个问题。转型起源应该帮助一些人。
我只是用JQuery做的。
我在Firefox和IE10中测试过。
在我的问题项目有不同的高度。
<!DOCTYPE html>
<html>
<head>
<style>
.item {
border: 1px solid #FF0;
width: 100px;
position: relative;
}
</style>
<script src="http://code.jquery.com/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执行一个左边的浮动，这会将它“粘”到Parent DIV元素的左边。然后，您使用“top：0”，并将其“粘贴”到浏览器窗口的顶部。
#rightDIV {
float: left
top: 0
}
#leftDIV {
float: right;
top: 0
}
只需使用vertical-align：
.className {
display: inline-block;
vertical-align: top;
}
这里是FF，歌剧，铬，其有效的解决方案（近乎完美）：
<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>
的诀窍是“页面BREAK-内部：避免“在P上和在BODY上的列宽。它带有动态列数。 A中的文本可能是多行的，块可能有不同的高度。
也许有人有东西边和IE
这工作对我来说是改变书写模式的DIV对准的持续时间的伎俩。
.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;
一个很好的和有趣的问题。无论我如何展现自己的想象力，我都看不到用纯HTML和CSS做到这一点的方法。有兴趣看看是否有任何事情发生。 – 2009-12-04 15:00:22
你如何创建页面的底部限制？这些div会在固定高度的容器内吗？ – Rudism 2009-12-04 15:19:23
是的容器有一个固定的高度 – mck89 2009-12-04 15:24:13