Блог

У меня есть массив объектов, содержащих детали, которые я хочу отобразить в DOM

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

У меня есть следующий CSS для отображения строки из 3 столбцов, поэтому в каждой строке будет 3 SavedSearchBox ‘s.

 .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.

На самом деле похоже, что у вас проблема с 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>