javascript - 将 2 列与容器对齐

Question

我有一个模板，我正在根据自己的喜好进行修改。它是一个没有边距或填充的容器(蓝色)，位于显示产品(红色)的循环内。我想每行显示 2 个产品，宽度为 49%，间距或边距为 2%，这样所有内容都是 100% 宽 (49 + 2 + 49 = 100)。问题是，如果我添加边距，它不会对齐。有什么形式可以做到这一点？

更新:

容器(蓝色)位于另一个 float 容器内。我不仅有 2 个产品(红色)，而且每页有 20 个产品。

我希望容器左侧的产品(product1、product3、product5 ...)与 div.container 的左侧对齐。右侧的产品(product2、product4、product6 ...)与 div.container 的右侧对齐，并且它们之间有一个边距或空间。

Answer 1

只需利用 flexbox model 并为自己腾出一些时间。使用 prefixes !

.wrapper {
  padding: 1rem;
  background: teal;
  width: 480px;
}

.main-element {
  margin-bottom: .7rem;
  width: 100%;
  height: 100px;
  background: white;
}

.element-container {
  display: flex;
  justify-content: space-between;
}

.element {
  width: 49%;
  height: 220px;
  background: tomato;
}

<div class="wrapper">
  <div class="main-element"></div>
  <div class="element-container">
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>