在wordpress中面向Css网格的问题

Question

我希望一切顺利，我正在使用WordPress我已经为网格编写了一个HTML标记，其中单行2图像需要显示但是它们是垂直的，每行显示一个我想要网格的图像

select * from table(smlfqa.xajjuc_le('xxxxx')) a

[SQL0204] XAJJUC_LE in SMLFQA type *N not found.


Elapsed Time:  0 hr, 0 min, 0 sec, 0 ms.

这里的图像是每行显示单个意味着一个接一个的垂直图像，让我知道我在哪里制作错误代码看起来很完美，上面用html中的类的css代码进行描述，任何诀窍都要解决CSS

我正在创建一个菜单部分，我正在关注一位作者，但他对于我有不同的相同代码有不同的结果

Answer 1

将 box-sizing：border-box; 添加到您的列中，如下所示：

.container-grid {
  margin-left: -10px;
  margin-right: -10px;
}

.container-grid::after {
  content: '';
  display: block;
  clear: both;
}

[class*='columns'] {
  padding: 0 10px;
  float: left;
  box-sizing: border-box;
}

.columns2-4 {
  width: 50%;
}

img {
  max-width: 100%;
}

<div class="our-specialties Container">
  <h3 class="primary-text"> Pizzas </h3>
  <div class="container-grid">
    <div class="columns2-4">
      <a href="#">
        <img src="http://lorempixel.com/200/200/" />
        <h4>title<span>20 $</span> </h4>
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </a>
    </div>
    <div class="columns2-4">
      <a href="#">
        <img src="http://lorempixel.com/200/200/" />
        <h4>title<span>20 $</span> </h4>
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </a>
    </div>
    <div class="columns2-4">
      <a href="#">
        <img src="http://lorempixel.com/200/200/" />
        <h4>title<span>20 $</span> </h4>
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </a>
    </div>
    <div class="columns2-4">
      <a href="#">
        <img src="http://lorempixel.com/200/200/" />
        <h4>title<span>20 $</span> </h4>
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </a>
    </div>
  </div>

</div>