Question

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

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

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

Answer 1

只需使用vertical-align：

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

Answer 2

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

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

Answer 3

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://codepen.io/HugoGiraudel/pen/DoAIB
您可以在Hugo的blog post

Answer 4

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

如果您希望将div显示在彼此之下，则必须执行以下操作：

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

Answer 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应该有所帮助。

Answer 6

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

Answer 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

Answer 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>

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

Answer 10

这是一个在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上的列宽。它带有动态列数。 A中的文本可能是多行的，块可能具有不同的高度。

也许某人有Edge和IE的东西

Answer 11

对我有用的技巧是在div-alignment期间改变写入模式。

.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>

Answer 12

您可以对兄弟选择器执行某些操作，例如：

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

没有尝试过，但这可能会让第4个div浮动，也许会做你想要的。再次不完全支持。

Answer 13

这适用于ul：

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

Answer 14

我知道这个问题已经过时了。但是今天有人希望你这么做。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 15

这对我有用：

margin-bottom: auto;

如何用CSS制作浮顶？

15 个答案: