是否可以通过这种方式“定位”我的博客文章？

时间：2021-07-25 20:28:38

标签： html css blogs

位置

Position

代替：

Preview

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

这是示例代码：

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

3 个答案:

答案 0 :(得分：3)

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

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

grid-template-rows: 是您的布局变得有趣的地方。如您所见，我们的行数比 DOM 中实际拥有的行数多。我们将多余的行重叠起来，通过向 grid-template-areas 属性中的每一行添加一个可变的小数部分来创建偏移量。

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>

答案 1 :(得分：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>

答案 2 :(得分：1)

您可以使用 flex-box 和 flex-direction:column; 轻松实现这一点。确保为容器和 flex-wrap:wrap; 分配高度和宽度。其他需要注意的是，您将无法根据它们的大小自动设置 flex-items，它们将遵循它们包含在 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>

相关问题
最新问题