javascript - 如何将div放在等边距上

Question

 <div class='row'>
     <div class='column' style='height:150px;width:150px;float:right;'>
       <P>some data</div>
     </div>
     <div class='column' style='height:150px;width:150px;float:right;'>
       <P>some data</div>
     </div>
     <div class='column' style='height:150px;width:150px;float:right;'>
       <P>some data</div>
     </div>
       <div class='column' style='height:150px;width:150px;float:right;'>
       <P>some data</div>
     </div>
     <div class='column' style='height:150px;width:150px;float:right;'>
       <P>some data</div>
     </div>
   </div>

现在的问题是，当我根据屏幕尺寸使屏幕尺寸变小时，div 会向下移动，但在右侧仍然有很多黑色空间，我只想使该空间均匀分布到边距如何做到这一点，我需要帮助

Answer 1

i want same size but must me equally distribute the margins and also when sereen size is less then width divs must slide down.

Flexbox 可以做到这一点；

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}
.column {
  height: 150px;
  flex: 0 0 150px;
  margin-bottom: 1em;
  border: 1px solid red;
}

<div class='row'>
  <div class="column">
    <p>some data 1</p>
  </div>
  <div class="column">
    <p>some data 2</p>
  </div>
  <div class="column">
    <p>some data 3</p>
  </div>
  <div class="column">
    <p>some data 4</p>
  </div>
  <div class="column">
    <p>some data 5</p>
  </div>

</div>