是否有任何选项可以让我的文章部分更加匹配？

debugcn 发表于 Dev

马特乌斯·多斯

我正在尝试制作我的第一个 wordpress 主题。现在我在主页上的文章部分工作。我的文章布局有一些逻辑问题。

这就是我的实际布局。

/* Article Section */
div.middle-container { 
    width: 100%;
}

/* Left Banner Section */
div.banner-conteiner {
    width:25%;
    height:100px;   
    float:left;     
}

/* Article Container */
div.article-container {
    float:left;
    width:75%;      
}

/* Content Area */
article.post {
    max-width:330px;
    background: white; /* DO ZMIANY !! */
    margin-bottom: 20px;
    margin-left: 4%;
    border-radius: 12px 12px 24px 24px;
    box-shadow: 0 15px 35px rgba(50, 50, 90, .1), 0 5px 15px rgba(0, 0, 0, .07);
    transition: .6s ease;
    float:left;
    border: 1px solid red;
}

只是艺术的例子:)

               HEADER
______________________________________
|         | |    P     |  |     P    |    
|    B    | |    O     |  |     O    |
|    A    | |    S     |  |     S    |
|    N    | |    T     |  |     T    |
|    N    | |          |  
|    E    | |          |  |    P     |
|    R    |               |    O     |
|         |               |    S     |
|         |               |    T     |
|         |
|         | |    P     |  |    P     |
|         | |    O     |  |    O     |
|         | |    S     |  |    S     |
|         | |    T     |  |    T     |
______________________________________
              FOOTER

当我添加新帖子时，我想让这篇文章流动，但是当一篇文章太长时，它会因为上一篇文章而卡住，留下太多可用空间。有没有类似的选择？

也许您也知道，是否有任何选项可以在我的主页中仅显示 +/- 6 个最新帖子？

科迪·麦克像素脸

使用浮点数时，这通常是一个问题。您可以尝试清除左侧的所有其他帖子，以免他们在比其他帖子高的帖子后卡住。

例如：

.post:nth-of-type(2n+2) {
    clear: left;
}

...这可能会给你这样的东西：

               HEADER
______________________________________
|         | |    P     |  |     P    |    
|    B    | |    O     |  |     O    |
|    A    | |    S     |  |     S    |
|    N    | |    T     |  |     T    |
|    N    | |          |  
|    E    | |          |
|    R    |             
|         | |    P     |  |     P    |
|         | |    O     |  |     O    |
|         | |    S     |  |     S    |
|         | |    T     |  |     T    |
______________________________________
              FOOTER

还有一些额外的空间，这只会在每行有两个帖子时才有效。当您想将事物缩放到较小的视口时，这可能不是最佳解决方案。

如果你想要更健壮的东西，你可以尝试删除所有的浮点数并使用flexbox和grid组合代替：

/* Example without any spacing or other styling */
.middle-container {
    display: flex;
}

.banner-container {
    flex: 25%;
}

.article-container {
    flex: 75%;

    /* Grid with two columns */
    display: grid;
    grid-template-columns: 1fr 1fr;
}

这基本上会给你与浮动版本相同的视觉效果，但有更多的工具来调整不同的视口、后对齐等。

如果你想要一个真正的砖石布局，我建议使用像@Tmba 建议的第三方 JavaScript。有很多选择。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。