html - 没有行的 flex

标签 html css

<分区>

Objective: Create html/css inside a flex box in other div's.

它的特别之处在于，它们应该像没有行一样工作 但这就是它的样子 enter image description here

所以这是我的问题:我有行并且帖子之间有空间。 我还将保留我现在创建的 html 和 css 文件。

.flex-container {
    display: flex;
    background-color: yellow;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: start;
    align-content: flex-start;
}

.item {
    background-color: green;
    flex-basis: 500px;
}

.post-grid {
    display: grid;
    background-color: green;
    flex-basis: 500px;
    grid-template-columns: repeat(10, 50px);
}

.post-col-1 {
    grid-template-columns: 1 / 2;
    border: solid 0.5px black;
}

.post-col-2 {
    display: grid;
    grid-column: span 2;
    grid-template-columns: 10% 10%;
    border: solid 0.5px black;
}

.post-col-2 p{
    width: 100px;
    word-break: break-all;
}

.post-col-2 a{
    width: 100px;
    word-break: break-all;
}

.post-col-3 {
    display: grid;
    grid-column: span 3;
    grid-template-columns: 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-3 p{
    width: 150px;
    word-break: break-all;
}

.post-col-3 a{
    width: 150px;
    word-break: break-all;
}

.post-col-4 {
    display: grid;
    grid-column: span 4;
    grid-template-columns: 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-4 p{
    width: 200px;
    word-break: break-all;
}

.post-col-4 a{
    width: 200px;
    word-break: break-all;
}

.post-col-5 {
    display: grid;
    grid-column: span 5;
    grid-template-columns: 10% 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-5 p{
    width: 250px;
    word-break: break-all;
}

.post-col-5 a{
    width: 250px;
    word-break: break-all;
}

.post-col-6 {
    display: grid;
    grid-column: span 6;
    grid-template-columns: 10% 10% 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-6 p{
    width: 300px;
    word-break: break-all;
}

.post-col-6 a{
    width: 300px;
    word-break: break-all;
}

.post-col-7 {
    display: grid;
    grid-column: span 7;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-7 p{
    width: 350px;
    word-break: break-all;
}

.post-col-7 a{
    width: 350px;
    word-break: break-all;
}

.post-col-8 {
    display: grid;
    grid-column: span 8;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-8 p{
    width: 400px;
    word-break: break-all;
}

.post-col-8 a{
    width: 400px;
    word-break: break-all;
}

.post-col-9 {
    display: grid;
    grid-column: span 9;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-9 p{
    width: 450px;
    word-break: break-all;
}

.post-col-9 a{
    width: 450px;
    word-break: break-all;
}

.post-col-10 {
    display: grid;
    grid-column: span 10;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-10 p{
    width: 500px;
    word-break: break-all;
}

.post-col-10 a{
    width: 500px;
    word-break: break-all;
}

img {
    display: block;
    width: 100%;
}

.post-header {
    height: 50px;
}

p {
    display: block;
    width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Test-Preview</title>
</head>
<body>
    <div class="flex-container">

        <div class="post-grid">
            <div class="post-header post-col-10">
                <div class="post-profile-picture post-col-1">
                    <img src="../Pictures/PB-pic1.jpg">
                </div>
                <div class="post-blogger-name post-col-7">
                    <a href="index.html">Blogger-Name</a>
                </div>
                <div class="post-col-2">
                    <p>Follow</p>
                </div>
            </div>

            <div class="post-content post-col-10">
                <img class="post-col-10" src="../Pictures/Content-pic1.png">
            </div>

            <div class="post-text post-col-10">
                <p>Texte die der Blogger unter dem Bild verfassen kann.</p>
            </div>

            <div class="post-tags post-col-10">
                <a href="index.html">Post-Tags</a>
            </div>

            <div class="post-footer post-col-10">
                <div class="post-flag post-col-1">
                    <p>flag</p>
                </div>
                <div class="post-date post-col-5">
                    <p>00.00.0000</p>
                </div>
                <div class="post-share post-col-1">
                    <p>share</p>
                </div>
                <div class="post-comment post-col-1">
                    <p>comment</p>
                </div>
                <div class="post-like post-col-1">
                    <p>like</p>
                </div>
                <div class="post-save post-col-1">
                    <p>save</p>
                </div>
            </div>
        </div>

        <!----->

        <div class="post-grid">
            <div class="post-header post-col-10">
                <div class="post-profile-picture post-col-1">
                    <p>hello</p>
                </div>
                <div class="post-blogger-name post-col-7">
                    <a href="index.html">Blogger-Name</a>
                </div>
                <div class="post-col-2">
                    <p>Follow</p>
                </div>
            </div>

            <div class="post-content post-col-10">
                <img class="post-col-10" src="../Pictures/Content-pic2.jpg">
            </div>

            <div class="post-footer post-col-10">
                <div class="post-flag post-col-1">
                    <p>flag</p>
                </div>
                <div class="post-date post-col-5">
                    <p>00.00.0000</p>
                </div>
                <div class="post-share post-col-1">
                    <p>share</p>
                </div>
                <div class="post-comment post-col-1">
                    <p>comment</p>
                </div>
                <div class="post-like post-col-1">
                    <p>like</p>
                </div>
                <div class="post-save post-col-1">
                    <p>save</p>
                </div>
            </div>
        </div>

        <!---->

        <div class="post-grid">
            <div class="post-header post-col-10">
                <div class="post-profile-picture post-col-1">
                    <img src="../Pictures/PB-pic1.jpg">
                </div>
                <div class="post-blogger-name post-col-7">
                    <a href="index.html">Blogger-Name</a>
                </div>
                <div class="post-col-2">
                    <p>Follow</p>
                </div>
            </div>

            <div class="post-content post-col-10">
                <img class="post-col-10" src="../Pictures/Content-pic1.png">
            </div>

            <div class="post-text post-col-10">
                <p>Texte die der Blogger unter dem Bild verfassen kann.</p>
            </div>

            <div class="post-tags post-col-10">
                <a href="index.html">Post-Tags</a>
            </div>

            <div class="post-footer post-col-10">
                <div class="post-flag post-col-1">
                    <p>flag</p>
                </div>
                <div class="post-date post-col-5">
                    <p>00.00.0000</p>
                </div>
                <div class="post-share post-col-1">
                    <p>share</p>
                </div>
                <div class="post-comment post-col-1">
                    <p>comment</p>
                </div>
                <div class="post-like post-col-1">
                    <p>like</p>
                </div>
                <div class="post-save post-col-1">
                    <p>save</p>
                </div>
            </div>
        </div>

        <!---->

        <div class="post-grid">
            <div class="post-header post-col-10">
                <div class="post-profile-picture post-col-1">
                    <img src="../Pictures/PB-pic1.jpg">
                </div>
                <div class="post-blogger-name post-col-7">
                    <a href="index.html">Blogger-Name</a>
                </div>
                <div class="post-col-2">
                    <p>Follow</p>
                </div>
            </div>

            <div class="post-content post-col-10">
                <img class="post-col-10" src="../Pictures/Content-pic1.png">
            </div>

            <div class="post-text post-col-10">
                <p>Texte die der Blogger unter dem Bild verfassen kann.</p>
            </div>

            <div class="post-tags post-col-10">
                <a href="index.html">Post-Tags</a>
            </div>

            <div class="post-footer post-col-10">
                <div class="post-flag post-col-1">
                    <p>flag</p>
                </div>
                <div class="post-date post-col-5">
                    <p>00.00.0000</p>
                </div>
                <div class="post-share post-col-1">
                    <p>share</p>
                </div>
                <div class="post-comment post-col-1">
                    <p>comment</p>
                </div>
                <div class="post-like post-col-1">
                    <p>like</p>
                </div>
                <div class="post-save post-col-1">
                    <p>save</p>
                </div>
            </div>
        </div>

         <!----->

         <div class="post-grid">
            <div class="post-header post-col-10">
                <div class="post-profile-picture post-col-1">
                    <p>hello</p>
                </div>
                <div class="post-blogger-name post-col-7">
                    <a href="index.html">Blogger-Name</a>
                </div>
                <div class="post-col-2">
                    <p>Follow</p>
                </div>
            </div>

            <div class="post-content post-col-10">
                <img class="post-col-10" src="../Pictures/Content-pic2.jpg">
            </div>

            <div class="post-footer post-col-10">
                <div class="post-flag post-col-1">
                    <p>flag</p>
                </div>
                <div class="post-date post-col-5">
                    <p>00.00.0000</p>
                </div>
                <div class="post-share post-col-1">
                    <p>share</p>
                </div>
                <div class="post-comment post-col-1">
                    <p>comment</p>
                </div>
                <div class="post-like post-col-1">
                    <p>like</p>
                </div>
                <div class="post-save post-col-1">
                    <p>save</p>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

有人可以帮助我吗？或者甚至可以这样做，或者您根本不推荐这样做？

感谢帮助^^

最佳答案

对于此布局，使用 Javascript 库可能比尝试自己构建它更好，因为需要进行计算以便将元素放置在正确的列中。

有大量 JS 库可用于此目的。这是一个:

https://masonry.desandro.com/

这是一篇很好的文章，解释了一些选项:

https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

关于html - 没有行的 flex ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59605064/

上一篇：javascript - 如何在图像上添加可编辑的文本字段？

下一篇：javascript - Javascript querySelector即使在HTML文件末尾也无法与我的脚本一起使用

相关文章：

javascript - 如何使用 jQuery 更改带有按钮的背景图片 url

Javascript > HTML 滚动按钮在页面顶部时不会消失

属性名称模式的 JavaScript/CSS 选择器

html - 内联按钮布局打破了下拉内容布局

html - 版式与 HTML 标签

javascript - div 类(index.php)看不到 css 文件夹

html - 在响应版本中显示 block

html - 内容 100% 高度到窗口高度

python - 使用 lxml 解析 HTML - 如何在结果列表中保留空内容？

html - 重叠的盒子

©2024 IT工具网  联系我们