Html 使用CSS/CSS3如何构建流体柱布局，其中不同高度的项目靠近上面的项目？_Html_Css

Html 使用CSS/CSS3如何构建流体柱布局，其中不同高度的项目靠近上面的项目？

html css

Html 使用CSS/CSS3如何构建流体柱布局，其中不同高度的项目靠近上面的项目？,html,css,Html,Css,使用以下代码（在图像之后），我得到如下布局：但我想要的是这样的布局：我当前的代码： CSS: HTML: 布局这里是第一张牌这里是卡2 这里是第三张牌这里是第四张牌这里是5号卡这里是6号卡必须在Chrome（Android/Desktop）、Safari iOS 7+、Firefox 38+（Android/Desktop）中工作。您必须使用jquery。这个jquery插件将帮助您。下载并获得结果您不必使用高度。也许这会有所帮助。你反对js的回答吗？或者你的布局必须

使用以下代码（在图像之后），我得到如下布局：

但我想要的是这样的布局：

我当前的代码：

CSS:

HTML:


布局
这里是第一张牌
这里是卡2
这里是第三张牌
这里是第四张牌
这里是5号卡
这里是6号卡

必须在Chrome（Android/Desktop）、Safari iOS 7+、Firefox 38+（Android/Desktop）中工作。您必须使用jquery。这个jquery插件将帮助您。下载并获得结果

您不必使用高度。

也许这会有所帮助。你反对js的回答吗？或者你的布局必须是css吗？如果是这样的话，你需要从上到下，而不是从左到右，开放你的信用卡订单。

#columns
{
    column-width: 320px; /* change to EM later */
    column-gap: 15px;
    width: 90%;
    max-width: 770px;
    margin: 50px auto;
}

#columns .card 
{
    background: #fefefe;
    border: 2px solid #fcfcfc;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    padding: 15px; padding-bottom: 10px;
    transition: opacity .4s ease-in-out;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    column-break-inside: avoid;
    display: inline-block;
    background-color: #e8e8e8;
}

#columns:hover .card:not(:hover)
{
    opacity: 0.4;
}

#card1
{
    width: 320px;
    height: 200px;
}

#card2
{
    width: 320px;
    height: 160px;
}

#card3
{
    width: 320px;
    height: 200px;
}

#card4
{
    width: 320px;
    height: 200px;
}

#card5
{
    width: 320px;
    height: 200px;
}

#card6
{
    width: 320px;
    height: 200px;
}

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Layout</title>

        <link href="stylesheets/reset.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="stylesheets/main.css" media="screen" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="columns">
            <div id="card1" class="card">Card 1 here</div>
            <div id="card2" class="card">Card 2 here</div>
            <div id="card3" class="card">Card 3 here</div>
            <div id="card4" class="card">Card 4 here</div>
            <div id="card5" class="card">Card 5 here</div>
            <div id="card6" class="card">Card 6 here</div>
        </div>
    </body>
</html>