我的博文可以这样 'position' 吗？

Question

位置

而不是：

我想通过用其他帖子填充这些“空白”空间来将帖子靠得更近。

这是示例代码：

<!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>

Answer 1

您可以使用列。

/* 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>

Answer 2

您可以使用 display: grid 来获取此布局。通过偏移您的行并在适当的位置重叠，您可以将这些重叠的行分配给每列三个 div，以获得您想要实现的偏移外观。

grid-template-columns: 允许您指定布局中有多少列以及它们将占用父容器的宽度。我使用 fr，它是一个 fraction 单位。每列都是一个分数，因此它们基本上占宽度减去间隙的 33.3%。

grid-template-rows: 是您的布局变得有趣的地方。如您所见，我们的行数比 DOM 中的实际行数多。我们将 excess 行重叠，通过向 grid-template-areas [=52= 中的每一行添加可变小数额来创建偏移量].

grid-template-areas: 字面上使用选择器布置子元素。这会覆盖 DOM 中元素的位置。因此，无论选择器 1 在您的 HTML 中是否排在第一位，它都会将其放置在属性.

中的布局位置

grid-area: 放置在子选择器 css 上并将引用其选择器 => ex: .three { grid-area: three; }。这与父元素上的 grid-template-areas 属性重合。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2.5fr 0.5fr 0.8fr 1.6fr 0.4fr 0.3fr 2.1fr 0.4fr 0.4fr;
  grid-template-areas: "one two three" "one five three" "one five six" "four five six" "four five nine" "four eight nine" "seven eight nine" "seven . nine" "seven . .";
  width: 100%;
  height: auto;
}

.box {
  background-color: blue;
  padding: 1rem;
  margin: 2.5px; /* could use "gap" on parent element as well. */
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.one {
  grid-area: one;
}

.six {
  grid-area: six;
}

.five {
  grid-area: five;
}

.four {
  grid-area: four;
}

.nine {
  grid-area: nine;
}

.eight {
  grid-area: eight;
}

.seven {
  grid-area: seven;
}

<div class="parent">
  <div class="one box">P1
    <p>abcdefghijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="two box">P2
    <p>abcd</p>
    <p>efg</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="three box">P3
    <p>abcd</p>
    <p>efg</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>yz</div>
  <div class="four box">P4
    <p>abcd</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="five box">P5
    <p>abcd</p>
    <p>hijk</p>
    <p>lmno
      <p>pq</p><p>rstuvwx</p>
    <p>yz</p>
  </div>
  <div class="six box">P6
    <p>abcd</p>
    <p>hijk</p>
    <p>lmnopq
      <p>rst</p>u
      <p>v</p><p>wx</p>
    <p>yz</p>
  </div>
  <div class="seven box">P7
    <p>abcd</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="eight box">P8
    <p>abcd</p>
    <p>efg</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="nine box">P9
    <p>abcd</p>
    <p>hijk</p>
    <p>lmno
      <p>pq</p><p>rstuvwx</p>
    <p>yz</p>
  </div>
</div>

Answer 3

您可以使用 flex-box 和 flex-direction:column; 轻松实现这一点。确保将高度和宽度分配给容器和 flex-wrap:wrap;。另一件需要注意的事情是，您将无法根据它们的大小自动设置弹性项目，它们将遵循它们包含在 html 代码中的顺序。唯一的原因是我为我的 body 元素使用了固定的高度和宽度，以免影响不同屏幕上的布局。并展示我的意图。

* {
  margin: 0px;
  padding: 0px;
}

html,
body {
  height: 250px;
  width: 420px;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2px;
  align-content: center;
}

.my {
  background-color: blue;
  width: 100px;
  display: inline-block;
}

<body>
  <div class="container">
    <div class="my">P1
      <p>lmnopqrstuvwx</p>
      <p>yz</p>
    </div>
    <div class="my">P2
      <p>abcd</p>
      <p>lmnopqrstuvwx</p>
      <p>yz</p>
    </div>
    <div class="my">P3
      <p>abcd</p>
      <p>hijk</p>
      <p>abcd</p>
      <p>hijk</p>
    </div>
    <div class="my">P4
      <p>abcd</p>
      <p>efg</p>
      <p>hijk</p>
      <p>lmnopqrstuvwx</p>yz</div>
    <div class="my">P5
      <p>abcd</p>
      <p>hijk</p>
      <p>lmnopqrstuvwx</p>
      <p>yz</p>
    </div>
    <div class="my">P6
      <p>abcd</p>
      <p>pq</p>
      <p>yz</p>
    </div>
    <div class="my">P7
      <p>abcdu
        <p>v</p>
        <p>yz</p>
    </div>
    <div class="my">P8
      <p>abcd</p>
      <p>hijk</p>
    </div>
    <div class="my">P9
      <p>abcd</p>
      <p>abcd</p>
      <p>hijk</p>
    </div>
    <div class="my">P10
      <p>abcd</p>
      <p>hijk</p>
    </div>
    <div class="my">P11
      <p>abcd</p>
      <p>efg</p>
      <p>hijk</p>
      <p>lmnopqrstuvwx</p>
    </div>
  </div>
</body>

我的博文可以这样 'position' 吗？

Is it possible to 'position' my blog posts this way?

html

css

blogs