如何使用 CSS 制作浮动顶部？

我知道 CSS 只支持浮动属性的左右值，但是有没有实现浮动顶部的技术呢？我会尽力解释的。我有以下密码:

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

使用这个代码，每个 div 都会向左浮动，直到达到页面的右限制。我想做同样的事情，但是垂直，这样每个 div 放在前一个的底部，然后，当达到页面的底部限制，一个新的列被创建。有没有办法只使用 CSS (或者编辑 HTML 代码)来实现这一点？

210832 次浏览
小开
最佳答案

只使用 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 中，您可以使用列宽属性，该属性允许您根据需要将内容划分为多个列。

否则，您将不得不在 Javascript 或后端的不同 div 之间分发内容。

小开

没有 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{
float: left
}

没有尝试过，但是这可能会浮动第四个 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 的元素数量不固定，或者您不知道它可能有多少，那么您仍然需要 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;
}

这就是最终的结果:
enter image description here
我们在这里要做的是为行中的每个项目添加适当的边距。这种方法的局限性在于必须确定列行数。这不是动态的。我确信它有用例，所以我在这里包含了这个解决方案。

小开

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

小提琴: 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 执行一个左侧的 float，它将“粘贴”到 Parent DIV 元素的左侧。然后，使用“ top: 0”，它会“粘贴”到浏览器窗口的顶部。

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

简单地使用 vertical-align:

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

下面是一个在 FF，Opera，Chrome 中运行(几乎完美)的解决方案:

    <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上的 column-width。它带有动态列计数。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;
小开

我知道这个问题很老了，但是今天有人想问这个问题吗。

div.floatablediv{
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
div.floatcontainer{
-webkit-column-count: 2;
-webkit-column-gap: 1px;
-webkit-column-fill: auto;
-moz-column-count: 2;
-moz-column-gap: 1px;
-moz-column-fill: auto;
column-count: 2;
column-gap: 1px;
column-fill: auto;
}
<div style="background-color: #ccc; width: 100px;" class="floatcontainer">
<div style="height: 50px; width: 50px; background-color: #ff0000;" class="floatablediv">
</div>
<div style="height: 70px; width: 50px; background-color: #00ff00;" class="floatablediv">
</div>
<div style="height: 30px; width: 50px; background-color: #0000ff;" class="floatablediv">
</div>
<div style="height: 40px; width: 50px; background-color: #ffff00;" class="floatablediv">
</div>
<div style="clear:both;"></div>
</div>

小开

这对我有用:

margin-bottom: auto;

提交答案