技术咨询：如何将div元素定位至页面右侧？

下面是几种常用的实现方式，按需选择即可：

• 使用float属性
  这是比较传统的方法，直接给目标div设置浮动属性就能让它靠右。注意如果父容器里还有其他元素，可能需要添加清除浮动的样式避免布局混乱。

.right-div {
  float: right;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

• 使用position定位
  适合需要精准控制位置的场景，分两种情况：

  1. 绝对定位（相对于父容器）：先给父容器设置position: relative;，再给div设置绝对定位并靠右

  .parent-box {
    position: relative;
    width: 100%;
    height: 300px;
    border: 1px solid #000;
  }
  .right-div {
    position: absolute;
    right: 0;
    width: 200px;
    height: 100px;
    background-color: #ccc;
  }
  

  2. 固定定位（相对于浏览器窗口）：如果想让div固定在页面右侧，不随滚动移动，用这个方式，还可以搭配transform实现垂直居中

  .right-div {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 100px;
    background-color: #ccc;
  }
  

• 使用Flexbox布局
  现代布局首选方式，兼容性好，操作简单。给父容器设置Flex布局，然后让内容靠右对齐即可。

.parent-box {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 300px;
  border: 1px solid #000;
}
.right-div {
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

• 使用Grid布局
  同样是现代布局方案，有两种实现思路：
  1. 让网格项靠右对齐

  .parent-box {
    display: grid;
    justify-items: end;
    width: 100%;
    height: 300px;
    border: 1px solid #000;
  }
  .right-div {
    width: 200px;
    height: 100px;
    background-color: #ccc;
  }
  

  2. 划分网格列，把div放在右侧的自动列中

  .parent-box {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
    height: 300px;
    border: 1px solid #000;
  }
  .right-div {
    grid-column: 2;
    width: 200px;
    height: 100px;
    background-color: #ccc;
  }
  

内容的提问来源于stack exchange，提问作者Christos Segkani