CSS浮动divs在可变高度 [英] CSS Floating Divs At Variable Heights

问题描述

我有无限数量的div的100px宽度，可以适应250px宽度的父。无论高度如何，我需要将divs显示在行中，如图所示。我已经尝试解决这个问题，但div的高度似乎正在改变。

I have infinite number of divs of a 100px width, which can fit into a 250px width parent. Regardless of height, I need the divs to be displayed in rows, as shown in the image. I've tried resolving this, but the div height seems to be screwing it up.

我非常感谢您的帮助。感谢：）

I'd really appreciate your help. Thanks :)

        <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

推荐答案

据我所知，没有办法用纯CSS

To my knowledge, there's no way to fix this problem with pure CSS (that works in all common browsers):

• 浮动 don' t work 。


• display：inline-block 不起作用。


• position：relative 绝对需要手动像素调整。如果您使用的是服务器端语言，而且您使用的是图片（或可预测的高度），则可以使用服务器端代码自动处理像素调整。

• Floats don't work.
• display: inline-block doesn't work.
• position: relative with position: absolute requires manual pixel tuning. If you're using a server-side language, and you're working with images (or something with predictable height), you can handle the pixel tuning "automatically" with server-side code.

请改用 jQuery Masonry 。

这篇关于CSS浮动divs在可变高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！