可变高度的 CSS 浮动 Div [英] CSS Floating Divs At Variable Heights

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

问题描述

我有无限数量的 100 像素宽度的 div,它们可以放入 250 像素宽度的父级.无论高度如何,我都需要按行显示 div,如图所示.我试过解决这个问题,但 div 高度似乎把它搞砸了.

非常感谢您的帮助.谢谢:)

 <样式>#持有者{宽度:250px;边框:1px 蓝色虚线;显示:内联块;}.盒子{宽度:100px;高度:150px;背景颜色:#CCC;向左飘浮;文字对齐:居中;字体大小:45px;显示:内联块;}.一{背景色:#0F0;高度:200px;}.二{背景色:#0FF;}.三{背景色:#00F;}.四{背景色:#FF0;}</风格><div id="持有人"><div class="box one">1</div><div class="box 2">2</div><div class="box 3">3</div><div class="box 4">4</div>

这是jsfiddle

这是我使用 javascript 所做的和实现的https://jsfiddle.net/8o0nwft9/

解决方案

据我所知,使用纯 CSS(适用于所有常见浏览器)无法解决此问题:

  • 浮动不起作用.
  • display: inline-block 不起作用.
  • position: relativeposition: absolute 需要手动像素调整.如果您使用的是服务器端语言,并且正在处理图像(或具有可预测高度的内容),则可以使用服务器端代码自动"处理像素调整.

改为使用 jQuery Masonry.

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>

Here is the jsfiddle

Here is what I did and achieved using javascript https://jsfiddle.net/8o0nwft9/

解决方案

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

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

Instead, use jQuery Masonry.

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆