我有一个模板,我正在根据自己的喜好进行修改。它是一个没有边距或填充的容器(蓝色),位于显示产品(红色)的循环内。我想每行显示 2 个产品,宽度为 49%,间距或边距为 2%,这样所有内容都是 100% 宽 (49 + 2 + 49 = 100)。问题是,如果我添加边距,它不会对齐。有什么形式可以做到这一点?
更新:
容器(蓝色)位于另一个 float 容器内。我不仅有 2 个产品(红色),而且每页有 20 个产品。
我希望容器左侧的产品(product1、product3、product5 ...)与 div.container 的左侧对齐。右侧的产品(product2、product4、product6 ...)与 div.container 的右侧对齐,并且它们之间有一个边距或空间。
最佳答案
只需利用 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>
关于javascript - 将 2 列与容器对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43741783/