Question

我正在努力制作具有不同高度和宽度的响应式框。问题是（正如你在图中看到的那样）是他们不会进入缺口并填补剩余的空间。任何人都知道导致这种情况的原因以及可以解决问题的原因是什么？

        <section class="blokContentContainer">
            <div class="blok-25">
            </div>
            <div class="blok-25">
            </div>
            <div class="blok-50">
            </div>
            <div class="blok-50">
            </div>
            <div class="blok-25">
            </div>
            <div class="blok-25">
            </div>
        </section>

 .blokContentContainer  div{
        float: left;
        display: inline-block;
        border: 2px solid white;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;
        background-color: #B2DFDB;
    }
    .blok-25{
        width: 25%;
        height: 300px;
    }
    .blok-50{
        width: 50%;
        height: 500px;
    }
    .blokContentContainer{
        height: 100%;
        width:98%;
        margin-left:1%;
    }

Answer 1

这是使用瓷砖时的常见问题。你可以自己做javascript，或者使用Masonry

问题是第二行瓷砖会清除整个第一行。要克服这个问题，你需要检查前两个元素的高度，看看它们的高度是否较小，但是足够宽，并使用position:relative和{{1}移动第二行中的第一个图块}。当然这只是一个例子，实现取决于更多条件（固定/可变大小，排序，保留纵横比等）

Answer 2

据我所知，纯css是不可能的，因为：

花车不会填补空白
display: inline-block也无法工作
position: absolute和position: relative需要手动对齐

也许看看Jquery masonry

Answer 3

通过使用css，您无法构建平铺系统，您必须使用javascript。原因是每行的高度由行中的最高元素确定，除非您使用绝对定位元素，它将覆盖默认布局系统。

但是您必须使用javascript对齐元素，如果使用angular

，我建议使用平铺系统库，如Masonry或Angular Material

Answer 4

通过css无法解决这个问题。但是你可以参考以下链接Jquery masonry。

Answer 5

如果你需要可调整的div，为什么你不能使用jQuery砌体 http://masonry.desandro.com/

Answer 6

如果您可以使用固定宽度/高度（，即非百分比），那么CSS3列可以帮助您。

诀窍是使用columns和适当float清算的组合。 clear:left你的div更大的* { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; } .blokContentContainer { width: 400px; margin: 12px; -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 0px; column-gap: 0px; } .blokContentContainer div { display: block; background-color: #B2DFDB; border: 1px solid #fff; -webkit-column-break-inside: avoid; } .blok-25 { width: 100px; height: 100px; float: left; } .blok-50 { width: 200px; height: 200px; clear: left; }，以便较小的可以并排，但较大的可以突破。这是一个例子：

演示小提琴：http://jsfiddle.net/v8sjnfre/2/

演示代码段：

<section class="blokContentContainer">
    <div class="blok-25"></div>
    <div class="blok-25"></div>
    <div class="blok-50"></div>
    <div class="blok-50"></div>
    <div class="blok-25"></div>
    <div class="blok-25"></div>
</section>

import UIKit
import XCPlayground

class MyViewController: UIViewController {

override func viewDidLoad() {
   self.setToolBar()
   self.disableButton(20)
}

func setToolBar()
{
    let toolbar : UIToolbar = UIToolbar()
    toolbar.tag = 10
    toolbar.sizeToFit()

    self.view.addSubview(toolbar)  //must add to subview of viewcontroller

    let prevButton = UIBarButtonItem(title: "<", style: .Plain, target: self, action:"goBack:")
    prevButton.tag = 20

    let nextButton = UIBarButtonItem(title: ">", style: .Plain, target: self, action:"goNext:")
    nextButton.tag = 30

    let flexButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: self, action: nil)

    let doneButton = UIBarButtonItem(title: "Done", style: .Plain, target: self, action:"done:")

    let arrItems : NSArray = [prevButton, nextButton,flexButton, doneButton]
    [toolbar.setItems(arrItems as? [UIBarButtonItem], animated: true)]
    print("Toolbar set.")
}

func disableButton(tag: Int)
{
    if let toolbarWithButtons = self.view.viewWithTag(10) as? UIToolbar {
        print("Toolbar found by tag. Trying to disable button with tag \(tag).")
        var buttonToDisable: Array<AnyObject>?
        if let buttons = toolbarWithButtons.items {
            buttonToDisable = buttons.filter({
                (x : AnyObject) -> Bool in

                if let button = x as? UIBarButtonItem {
                    if button.tag == tag {
                        return true
                    }
                }
                return false
            })

            if let button = (buttonToDisable!.first as? UIBarButtonItem){
                button.enabled = false
                print("Button with tag \(button.tag) enabled: \(button.enabled)")
            }
        }
    }
    else {
        print("Toolbar not found by tag.")
    }
}

}


var ctrl = MyViewController()

XCPShowView("Playground VC", ctrl.view)

对列的浏览器支持相当不错（ IE＆gt; 9 ），并结合了供应商前缀。见这里 - http://caniuse.com/#feat=multicolumn

CSS divs适合差距

6 个答案: