1

我在这个网站上使用了 w3school 的 w3css,并且我使用了 w3-col l6 m6 s12 来显示帖子。它只是意味着它将在大屏幕上并排显示 2 个帖子,对于中侧显示也是如此,并且在小屏幕上只有一个覆盖所有 12 列。

但是帖子没有正确对齐。

我尝试将 height 属性添加为 auto 但它不起作用。

查看我在我的网站上上传的这个演示网站,以便您可以看到它的实际效果。

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

网站在网上直播

4

3 回答 3

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中添加新类,如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;}
于 2019-05-16T10:51:18.893 回答
1

您可以将此 CSS 添加到您的父容器w3-col l6 m6 s12

.w3-row-padding{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
 }
于 2019-05-16T10:51:28.187 回答
0

您可以通过每个 2 个项目来解决此问题<div class="w3-row-padding w3-row">

于 2019-05-16T10:48:30.270 回答