CSS浮动div在可变高度

CSS浮动div在可变高度

本文介绍了CSS浮动div在可变高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有无限数量的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>

这里是

推荐答案

据我所知,没有办法解决这个问题与纯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在可变高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!