移动我的CSS消息框

时间:2017-10-30 18:30:46

标签: css

我有以下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;
  }

3 个答案:

答案 0 :(得分:0)

您可以设置:

position: absolute;

,然后使用top: y pxleft: x px移动它。但请注意;绝对位置将使盒子脱离正常流量。

像这样:

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

答案 1 :(得分:0)

尝试使用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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

根据你的盒子是否在另一个div中以及你想要的.ConversionBox2中的内容,请尝试以下

padding-left: (number) px;
// will push the content in the .ConversionBox2 to the right
// padding maybe also be specified like
// padding: (top px) (right px) (bottom px) (left px);
margin-left: (number) px;
// will push the .ConversionBox2 to the right
// also can be written like
// margin: (top px) (right px) (bottom px) (left px);

如果您有兴趣,还可以查看相对和绝对定位,以便将此框放在您想要的位置。