我有无限多个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/

推荐答案

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

  • 浮点数为don't work.
  • display: inline-block doesn't work.
  • position: relative乘以position: absolute需要manual pixel tuning.如果您使用的是服务器端语言,并且您正在处理图像(或具有可预测高度的内容),则可以使用服务器端代码"自动"处理像素调优.

取而代之的是使用jQuery Masonry.

Css相关问答推荐

在Powershell中使用正则表达式编辑css文件

下一个js app样式刷新页面后不工作页面

如何在悬停时缓慢更改渐变 colored颜色 ?

NextJs - Tailwind css类样式未应用于响应屏幕

如何在WooCommerce产品页面中减少属性下拉菜单之间的空间

如何在JavaFX中设置分隔符的样式?

InertiaJS - Vue - Laravel:Using CSS Files

如何将此 Select 器转换为TailWind类

使用SVG以竖排书写模式创建渐变文本时,文本显示异常

Firefox未正确设置SVG的父div的宽度

Tailwind css 和 Next.js 导航组件 z-index 不工作

我在 ins 标签中有一个 img 标签,更改 ins 格式覆盖图像的视图

当页面大小小于VH时,Tailwind CSS如何使页脚留在底部

CSS:菜单图标动画

为什么我的 CSS 需要一个它似乎不需要的大括号?

如何在 CSS Grid 布局中指定行高?

ID 在整个页面中必须是唯一的吗?

CSS Select /样式第一个词

如何在页面上居中 twitter bootstrap 选项卡?

HTML5 和边框