Question

这就是我所拥有的

这就是我想要完成的事情

＆＃13;

<!doctype html>
<html>
    <head>
        <style>
            .card{
                background-color: aqua;
                border-radius: 10px;
                width: 30%;
                margin: 1% 1%;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div style="height:200px;" class="card">1</div>
        <div style="height:240px;" class="card">2</div>
        <div style="height:200px;" class="card">3</div>
        <div style="height:270px;" class="card">4</div>
        <div style="height:300px;" class="card">5</div>
        <div style="height:250px;" class="card">6</div>
    </body>
</html>

＆＃13;

Answer 1

导入bootstrap并使用col-md- in行格式化div。我相信你有那个css。

<!doctype html>
<html>
    <head>
        <style>
            .card{
                background-color: aqua;
                border-radius: 10px;
                width: 30%;
                margin: 1% 1%;
                display: inline-block;
            }
        </style>
    </head>
    <body>

        <div class="rows">
        <div class="col-md-4">
        <div style="height:200px;" class="card">1</div>
        <div style="height:240px;" class="card">2</div></div>
        <div class="col-md-4">
        <div style="height:200px;" class="card">3</div>
        <div style="height:270px;" class="card">4</div></div>
        <div class="col-md-4">
        <div style="height:300px;" class="card">5</div>
        <div style="height:250px;" class="card">6</div></div>
        </div>
    </body>
</html>

Answer 2

你需要尝试这样 -

只需使用以下脚本 -

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>

＆＃13;

.card{
  background-color: aqua;
  border-radius: 10px;
  width: 30%;
  margin: 1% 1%;
  display:inline-flex;
  vertical-align:top;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<div class=" grid js-masonry">
          <div style="height:200px;" class="card grid-item">1</div>
          <div style="height:240px;" class="card grid-item">2</div>
          <div style="height:200px;" class="card grid-item">3</div>
          <div style="height:270px;" class="card grid-item">4</div>
          <div style="height:300px;" class="card grid-item">5</div>
          <div style="height:250px;" class="card grid-item">6</div>
        </div>

＆＃13;

Answer 3

使用纯CSS无法做到这一点。

您可以更改HTML以包含＆＃34;列＆＃34;每两个（在你的情况下）.card元素的div，或者有很多javascript插件，你可以通过动态操作HTML轻松实现这个布局...检查http://masonry.desandro.com/作为一个很好的例子< / p>

Answer 4

这是快速回答;但对于具有动态高度的DIV，我相信使用jQuery插件会更好（例如Ronen提到的masonary）。

<!doctype html>
<html>
    <head>
        <style>
            .card{
                background-color: aqua;
                border-radius: 10px;
                width: 30%;
                margin: 1% 1%;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div style="height:200px;" class="card">1</div>
        <div style="height:240px;" class="card">2</div>
        <div style="height:200px;" class="card">3</div>
        <div style="height:270px; top:-40px; position:relative;" class="card">4</div>
        <div style="height:300px;" class="card">5</div>
        <div style="height:250px;  top:-40px; position:relative;" class="card">6</div>
    </body>
</html>

如何垂直推div？

4 个答案: