css - 移动我的 css 消息框

Question

我有以下 CSS 可以创建一个简单的框。我在将此框向右移动时遇到问题。我可以将什么属性添加到我的样式表中，以便我可以水平和垂直调整此框以适应我网站的设计？

 .ConversionBox2 {
    width: 300px;
    margin: 5px auto;
    background-color: #e5e5e5;
    color: #004284;
    padding: 15px;
    float:left;
    /* Border Radius Style */
    border-radius: 15px;
   /* Mozilla Firefox Extension */
   -moz-border-radius: 15px;
  }

Answer 1

试试 CSS flex-box

.box-wrap {
  display: flex;
  flex-wrap: wrap;
}
.container {
  display: flex;
  width: 200px;
  height: 200px;
  background-color: green;
  color: white;
  margin: 10px;
}
.horizontal-align {
  justify-content: center;
}
.vertical-align {
  align-items: center;
}
.left-align {
  justify-content: flex-start;
}
.right-align {
  justify-content: flex-end;
}
.center-align {
  align-items: center;
  justify-content: center;
}

<div class="box-wrap">
  <div class="container horizontal-align">Horizontal</div>
  <div class="container vertical-align">Vertical</div>
  <div class="container left-align">Left</div>
  <div class="container right-align">Right</div>
  <div class="container center-align">Center</div>
</div>