如何使内联块元素高度排列而不显示：table-cell

Question

我在css中有一些内嵌块元素，它们在顶部垂直排列，但在底部没有很好的排列。我试过显示：table-cell但是现在他们不再包装了，所以离开了右边的屏幕边缘，创建了不受欢迎的水平滚动条。当有足够的空间时，第一张图片是默认图片，第二张图片是当浏览器窗口的宽度太小时会发生的情况，第三张图片是内联块（未对齐），第四张图片显示内联块＃39;包裹力量在行动。我希望有一种方法可以将第四种和第一种结合起来。感谢您的时间。

Answer 1

我首先要获得一个剥离的线框：http://codepen.io/sheriffderek/pen/JKvARa

您可以使用经典浮点数执行此操作，并通过级联的小屏幕第一个@media规则进行大量控制。你可以看到这个手写笔......（伪代码，如果你不使用那种语法）

section
    width: 100%
    float: left
    padding: .5rem
    .card
        background: white
        padding: .5rem
.one
    border: 1px solid blue
    @media (min-width: 700px)
        width: 50%
        float: left
    @media (min-width: 1100px)
        width: 30%
.two
    border: 1px solid red
    @media (min-width: 700px)
        width: 50%
        float: left
    @media (min-width: 1100px)
        width: 30%
.three
    border: 1px solid green
    @media (min-width: 700px)
        width: 30%
        float: left
    @media (min-width: 1100px)
        width: 20%
.four
    border: 1px solid orange
    @media (min-width: 700px)
        width: 70%
        float: left
    @media (min-width: 1100px)
        width: 20%

Flex-box也非常棒。我会用两者构建它，看看你可以使用哪些约束。他们都有他们。