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

【问题标题】：How can I make a float top with CSS?如何使用 CSS 制作浮动顶部？
【发布时间】：2010-12-23 06:40:54
【问题描述】：

我知道 CSS 只支持 float 属性的 left 和 right 值，但是有没有实现浮动顶部的技术？我会尽力解释。我有以下代码：

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

使用此代码，每个 div 都会向左浮动，直到达到页面的右边界。我想做同样的事情，但垂直，这样每个 div 都放在前一个的底部，然后，当达到页面的底部限制时，创建一个新列。有没有办法只使用 CSS（也可以编辑 HTML 代码）来做到这一点？

【问题讨论】：

一个非常好的和有趣的问题。无论我将想象力发挥到什么程度，我都无法用纯 HTML 和 CSS 来实现这一点。有兴趣看看是否有任何事情发生。
你是如何创建页面的下限的？这些 div 会在固定高度的容器中吗？
是的，容器的高度是固定的
听起来你可能不得不打破一个 javascript 库。

标签： html css css-float

【解决方案1】：

只需使用vertical-align:

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

【讨论】：

【解决方案2】：

仅使用 CSS 实现此目的的唯一方法是使用 CSS 3，它不适用于所有浏览器（仅限最新一代，如 FF 3.5、Opera、Safari、Chrome）。

CSS 3 确实有一个很棒的属性：column-count，你可以这样使用：

#myContent{
  column-count: 2;
  column-gap: 20px;
  height: 350px;
}

如果 #myContent 正在包装您的其他 div。

更多信息在这里：http://www.quirksmode.org/css/multicolumn.html

正如您所读到的那样，使用它有严重的限制。在上面的示例中，如果内容溢出，它只会添加到另一列。在 mozilla 中，您可以使用 column-width 属性，该属性允许您根据需要将内容分成多个列。

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

【讨论】：

谢谢，我不知道。也许我可以找到在旧浏览器中实现这些属性的方法。
mck89 - 要在旧版浏览器中实现，您可能需要 javascript。

【解决方案3】：

Hugogi RaudelCSS 想出了一个有趣的方法来实现这一目标。假设这是我们的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 的blog post 中了解更多信息

【讨论】：

【解决方案4】：

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

如果您希望在彼此下方显示 div，您必须这样做：

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

【讨论】：

【解决方案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 应该对它有所帮助。

【讨论】：

【解决方案6】：

我认为完成你所说的最好的方法是有一组 div 作为你的列，并按照你描述的方式填充它们。然后用你正在谈论的内容垂直填充这些 div。

【讨论】：

【解决方案7】：

<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

【讨论】：

【解决方案8】：

我只是用 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>

【讨论】：

【解决方案9】：

要使用 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
   }

【讨论】：

【解决方案10】：

对我有用的技巧是在 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>

【讨论】：

【解决方案11】：

这个有效，申请ul:

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

【讨论】：

【解决方案12】：

这是一个适用于 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>

诀窍是page-break-inside: avoid; on p 和column-width on body。它带有动态列数。 a 中的文本可能是多行的，并且块可能有不同的高度。

也许有人对 Edge 和 IE 有所帮助

【讨论】：

【解决方案13】：

你也许可以用兄弟选择器做一些事情，例如：

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

没有尝试过，但这可能会使第 4 个 div 向左浮动，也许会做你想做的事。同样不完全支持。

【讨论】：

这不是我想要的，但它是一个非常有趣的效果:)

【解决方案14】：

我知道这个问题很老了。但是任何想要今天做的人都在这里。

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>

【讨论】：

【解决方案15】：

这对我有用：

margin-bottom: auto;

【讨论】：