Question

我有一个对象数组，其中包含要渲染到DOM的详细信息

searches.content.map((search, i) => {
   //....logic done here
   return <div class="SavedSearchBox">search.title</div>
)}

我有以下CSS来渲染3列的行，因此每行将有3个SavedSearchBox。

.SavedSearchBox {
   width: 33.33333333%;
   border: 1px solid #d8d8d8;
   display: inline-block;
   vertical-align: top;
   float: left;
}

我不确定每行中间的一列以增加水平边距，尽管我不确定如何做？

此外，考虑到返回的标记并不总是可以被3整除，因此在处理总收益为10或11的情况下，我也想在其中添加边距。

我很高兴听到任何JS解决方案（请不要使用jQuery，因为我正在使用React，并且不想使用jQuery）或CSS / SASS解决方案。

基本上我想要以下...

 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------

并且对于不能被3整除的情况

 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
       | margin | margin |    
        -------- -------

和

 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
            | margin |    
             -------

我有一个jfiddle来进行测试，至少要检查CSS。

Answer 1

听起来好像您遇到了X-Y问题，您可以使用Flexbox来实现此目标，如下所示：

.container {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  margin: 0 -1.5%;
}

.container .SavedSearchBox {
  background: whiteSmoke;
  box-sizing: border-box;
  margin: 10px 1.5%;
  padding: 10px;
  text-align: center;
  width: 30%;
}

<div class="container">
  <div class="SavedSearchBox">search.title</div>
  <div class="SavedSearchBox">search.title</div>
  <div class="SavedSearchBox">search.title</div>
  <div class="SavedSearchBox">search.title</div>
  <div class="SavedSearchBox">search.title</div>
  <div class="SavedSearchBox">search.title</div>
  <div class="SavedSearchBox">search.title</div>
</div>

定位多个3列布局的中间子元素

1 个答案: