有没有可能用这种方式放置我的博客文章？ [英] Is it possible to 'position' my blog posts this way?
本文介绍了有没有可能用这种方式放置我的博客文章？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
职位
而不是：
我想通过用其他帖子填充这些"；空白处来将帖子放置得更紧密。
以下是示例代码：
<!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>这篇关于有没有可能用这种方式放置我的博客文章？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
