如何解决此 wordpress 主题中帖子的对齐问题

Question

我正在为这个网站使用 w3school 的 w3css，我使用 w3-col l6 m6 s12 来显示 posts。它只是意味着它将在大屏幕上并排显示 2 post，对于中等显示也是如此，而在小屏幕上只有一个覆盖所有 12 列。

但是 post 没有正确对齐。

我尝试将高度属性添加为自动，但它不起作用。

查看我上传到我的网站上的这个演示站点，以便您实际查看它。

http://wordpress.takshaksh.xyz/wp/

Answer 1

您可以通过每个 <div class="w3-row-padding w3-row">.

只包含 2 个项目来解决此问题

Answer 2

请在style.css

中添加以下代码

div.w3-row-padding {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

或在 w3-row-padding 中添加新的 class，如 col_wrap 并在下方应用风格

.col_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col_wrap:after,
.col_wrap:before { display:none;}

Answer 3

您可以在 w3-col l6 m6 s12

上添加此 CSS 您的父容器

.w3-row-padding{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
 }

如何解决此 wordpress 主题中帖子的对齐问题

How to fix the alignment issue of posts in this wordpress theme

html

css

wordpress

w3-css