可变高度的CSS浮动分区

Question

我有无限数量的100px宽度的div，可以放入250px宽度的父级。无论高度如何，我都需要将div显示在行中，如图所示。我已经尝试过解决这个问题，但div高度似乎搞砸了。

我真的很感谢你的帮助。谢谢:)）

        <style>
            #holder{
            width:250px;
            border:1px dotted blue;
            display:inline-block;
        }
        .box{
            width:100px;
            height:150px;
            background-color:#CCC;
            float:left;
            text-align:center;
            font-size:45px;
            display:inline-block;
        }
        .one{
            background-color:#0F0;
            height:200px;
        }

        .two{
            background-color:#0FF;
        }

        .three{
            background-color:#00F;
        }

        .four{
            background-color:#FF0;
        }
    </style>

    <div id="holder">
        <div class="box one">1</div>
        <div class="box two">2</div>
        <div class="box three">3</div>
        <div class="box four">4</div>
    </div>

以下是jsfiddle

以下是我使用javascript所做的事情 https://jsfiddle.net/8o0nwft9/

Answer 1

据我所知，没有办法用纯CSS解决这个问题（适用于所有常见的浏览器）：

• 浮动don't work。
• display: inline-block doesn't work。
• position: relative position: absolute需要manual pixel tuning。如果您使用的是服务器端语言，并且正在使用图像（或具有可预测高度的内容），则可以使用服务器端代码“自动”处理像素调整。

相反，请使用jQuery Masonry。

Answer 2

假设您的需求更像是您的彩色示例代码：

.box:nth-child(odd){
    clear:both;
}

如果它将是3行，那么nth-child(3n+1)

Answer 3

我提供这个答案，因为即使有好的解决方案提供解决方案（using Masonry）仍然不清楚为什么不可能通过以下方式实现这一目标：使用花车。

（这很重要 - ＃1 ）。

  

浮动元素将向左或向右移动，因为它可以   最初的位置

所以这样说吧：

我们有2个div

<div class="div5">div5</div>
<div class="div6">div6</div>

.div-blue{
    width:100px;
    height:100px;
    background: blue;
}

.div-red{
    width:50px;
    height:50px;
    background: red;
}

没有float他们会低于另一个

如果我们float: right div5，div6位于div5所在的行，

/*the lines are just for illustrate*/

因此，如果现在我们float: left div6它将向左移动尽可能远，＆＃34; 在此行＆＃34; （请参阅上面的＃1），因此，如果div5改变其行，div6将会跟随它。

现在让我们在等式中添加其他div

<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>

.div-gree{
    width:150px;
    height:150px;
    background: green;

    float:right;
}

我们有这个

如果我们将clear: right设置为div5，我们会强制它采取以下行div4

和div6会在这条新线上漂浮到右边或左边。

现在让我们使用由于重复Forcing div stack from left to right

而带我到这里的问题

这里是测试它的片段：

＆＃13;

＆＃13;

div{
    width:24%;
    margin-right: 1%;
    float: left;
    margin-top:5px;
    color: #fff;
    font-size: 24px;
    text-align: center;
}

.one{
    background-color:red;
    height: 50px;
}

.two{
    background-color:green;
    height:40px;
}

.three{
    background-color:orange;
    height:55px;
}

.four{
    background-color:magenta;
    height:25px;
}

.five{
    background-color:black;
    height:55px;
}

＆＃13;

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>

<div class="one">1*</div>
<div class="three">2*</div>
<div class="four">3*</div>
<div class="two">4*</div>
<div class="five">5*</div>

＆＃13;

＆＃13;

＆＃13;

在上图中，您可以看到div.5旁边的div.3是如何存放的，因为它的行（由div.4的行框定义）到目前为止可以去，div.1*，div.2*等，也可以在div.5左侧漂浮，但因为它们不适合该行，所以它们会转到下面的行（由行框定义） div.5）

现在请注意，当我们将div.2*的高度降低到小于div.4*时，它将如何传递给div.5*：

我希望这有助于澄清为什么使用浮点数无法实现这一点。我只澄清使用浮点数（不是内联块）因为标题＆＃34; CSS浮动Div在可变高度＆＃34;因为现在答案很长。

Answer 4

正如已经正确指出的那样，单独使用CSS是不可能的......谢天谢地，我现在已经在http://isotope.metafizzy.co/找到了解决方案

似乎完全解决了这个问题。

Answer 5

在这条评论（CSS Block float left）的帮助下，我找到了答案。

在我创建的每个“行”上，我添加了一个类名left 在我创建的每个其他“行”上，我添加了一个类名right。

然后我向左浮动并为每个这些类名浮动！

唯一的复杂因素是我的内容顺序在“正确”行上颠倒了，但可以使用PHP解决。

感谢您的帮助！

#holder{
  width:200px;
  border:1px dotted blue;
  display:inline-block;
}
.box{
  width:100px;
  height:150px;
  background-color:#CCC;
  float:left;
  text-align:center;
  font-size:45px;
}
.one{
  background-color:#0F0;
  height:200px;
}

.two{
  background-color:#0FF;
}

.three{
  background-color:#00F;
  float:right;
}

.four{
  background-color:#FF0;
  float:right;
}
.left{float:left;}
.right{float:right;}

<div id="holder">
  <div class="box one left">1</div>
  <div class="box two left">2</div>
  <div class="box four right">4</div>
  <div class="box three right">3</div>
</div>
</body>

Answer 6

感谢thirtydot，我意识到我之前的回答没有正确解决问题。这是我的第二次尝试，它利用JQuery作为CSS唯一解决方案似乎不可能：

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function() {
                var numberOfColumns = 3;
                var numberOfColumnsPlusOne = numberOfColumns+1;
                var marginBottom = 10;  //Top and bottom margins added
                var kids = $('#holder:first-child').children();
                var add;
                $.each(kids, function(key, value) {
                    add = numberOfColumnsPlusOne+key;
                    if (add <= kids.length){
                        $('#holder:first-child :nth-child('+(numberOfColumnsPlusOne+key)+')').offset({ top: $('#holder:first-child :nth-child('+(key+1)+')').offset().top+$('#holder:first-child :nth-child('+(key+1)+')').height()+marginBottom });
                    }
                });
            });             
        </script>
        <style>
            #holder{
                width:270px;
                border:1px dotted blue;
                display:inline-block; /* Enables the holder to hold floated elements (look at dotted blue line with and without */
            }
            .box{
                width:80px;
                height:150px;
                background-color:#CCC;
                margin:5px;
                text-align:center;
                font-size:45px;
            }
            .one{
                height:86px;
            }
            .two{
                height:130px;
            }
            .three{
                height:60px;
            }
            .four{
                clear:both;
                height:107px;
            }
            .five{
                height:89px;
            }
            .six{
                height:89px;
            }
            .left{float:left;}
            .right{float:right;}
        </style>
    </head>
    <body>      
        <div id="holder">
            <div class="box one left">1</div>
            <div class="box two left">2</div>
            <div class="box three left">3</div>
            <div class="box four left">4</div>
            <div class="box five left">5</div>
            <div class="box six left">6</div>
        </div>
    </body>
</body>

我的解决方案唯一的问题是，当一个盒子是两盒宽而不是一盒时会发生什么。我还在研究这个解决方案。我会在完成时发布。

Answer 7

如果还有人在寻找替代方案，那就是其中之一。尝试使用（-moz - / - webkit-）column-width属性。它负责变量div高度问题。但是，列宽会在列的末尾添加新的div。

否则，jQuery Masonry效果最佳。

Answer 8

对于每个人来说，这可能不是一个确切的解决方案，但我发现（非常字面意思）在盒子外面思考很多情况：而不是从左到右显示方框，在很多情况下你可以填充左栏首先，比去中间，用盒子填充，最后用方框填充右栏。 那么你的形象就是：

：

如果您使用像php这样的脚本语言，您还可以通过向其添加新框并在填充所有列时输出从左到右填充列。例如（未经测试的PHP代码）：

$col1 = '<div class="col1"> <div>box1</div>';
$col2 = '<div class="col2"> <div>box2</div>';
$col3 = '<div class="col3"> <div>box3</div>';
$col1 .= '<div>box4</div> </div>'; //last </div> closes the col1 div
$col2 .= '<div>box5</div> </div>';
$col3 .= '<div>box6</div> </div>';
echo $col1.$col2.$col3;

$ col1，$ col2和$ col3可以有浮动：左边和宽度：33％，将div内的框设置为全宽，不浮动。

显然，如果你使用javascript / jquery动态加载框，你最好也可以用这种方式设置它们，正如在这个帖子的其他答案中所解释的那样。

Answer 9

显示只是把这个css放到你的div然后你有所需的布局。 不需要任何插件或JS。

 .Your_Outer {
    background-color: #FFF;
    border: 1px solid #aaaaaa;
    float: none;
    display:inline-block;
    vertical-align:top;
    margin-left: 5px;
    margin-bottom: 5px;
    min-width: 152.5px;
    max-width: 152.5px;
}

您可以根据自己的要求编辑代码：）

Answer 10

在现代浏览器上，您只需执行以下操作：

display: inline-block;
vertical-align: top;