有没有可能用这种方式放置我的博客文章？

2022-06-12 00:00:00 blogs html css

职位

而不是：

我想通过用其他帖子填充这些"；空白处来将帖子放置得更紧密。

以下是示例代码：

<!DOCTYPE html>
<html>

<head>
    <style>
        .my {
        background-color: blue;
        width: 360px;
        padding: 20px;
        margin: 5px;
        display: inline-block;
        
        /*  */
        }
    </style>

    <body>
        <div class="my">P1
            <p>abcdefghijk</p>
            <p>lmnopqrstuvwx</p>
            <p>yz</p>
        </div>
        <div class="my">P2
            <p>abcd</p>
            <p>efg</p>
            <p>hijk</p>
            <p>lmnopqrstuvwx</p>
            <p>yz</p>
        </div>
        <div class="my">P3
            <p>abcd</p>
            <p>efg</p>
            <p>hijk</p>
            <p>lmnopqrstuvwx</p>yz</div>
        <div class="my">P4
            <p>abcd</p>
            <p>hijk</p>
            <p>lmnopqrstuvwx</p>
            <p>yz</p>
        </div>
        <div class="my">P5
            <p>abcd</p>
            <p>hijk</p>
            <p>lmno
                <p>pq</p>rstuvwx</p>
            <p>yz</p>
        </div>
        <div class="my">P6
            <p>abcd</p>
            <p>hijk</p>
            <p>lmnopq
                <p>rst</p>u
                <p>v</p>wx</p>
            <p>yz</p>
        </div>
        <div class="my">P7
            <p>abcd</p>
            <p>hijk</p>
            <p>lmnopqrstuvwx</p>
            <p>yz</p>
        </div>
        <div class="my">P8
            <p>abcd</p>
            <p>efg</p>
            <p>hijk</p>
            <p>lmnopqrstuvwx</p>
            <p>yz</p>
        </div>
        <div class="my">P9
            <p>abcd</p>
            <p>hijk</p>
            <p>lmno
                <p>pq</p>rstuvwx</p>
            <p>yz</p>
        </div>

    </body>

</html>

解决方案

您可以使用列。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

/* Masonry grid */
.masonry {
  width: 440px;
  column-gap: 10px;
  column-fill: initial;
  column-count: 3;
}

/* Masonry item */
.masonry .my {
  background-color: blue;
  width: 120px;
  padding: 10px;
  margin-bottom: 10px;
  display: inline-flex;
  vertical-align: top;
  justify-content: space-between;
  display: inline-block;
}

<div class="masonry">
  <div class="my">P1
    <p>abcdefghijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="my">P2
    <p>abcd</p>
    <p>efg</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="my">P3
    <p>abcd</p>
    <p>efg</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>yz</div>
  <div class="my">P4
    <p>abcd</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="my">P5
    <p>abcd</p>
    <p>hijk</p>
    <p>lmno</p>
    <p>pq</p>
    <p>yz</p>
  </div>
  <div class="my">P6
    <p>abcd</p>
    <p>hijk</p>
    <p>lmnopq</p>
    <p>rst</p>
    <p>v</p>
    <p>yz</p>
  </div>
  <div class="my">P7
    <p>abcd</p>
    <p>hijk</p>
    <p>yz</p>
  </div>
  <div class="my">P8
    <p>abcd</p>
    <p>yz</p>
  </div>
  <div class="my">P9
    <p>abcd</p>
    <p>hijk</p>
    <p>lmno</p>
    <p>pq</p>
    <p>yz</p>
  </div>
</div>

相关文章