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

问题描述

我有无限数量的div的宽度为100px，可以适应250px宽度的父。不管高度如何，我需要在行中显示div，如图所示。我已经尝试解决这个问题，但是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):

• 浮动工作。


• display：inline-block 无效。


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

• 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

Instead, use jQuery Masonry.

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