javascript - 使 div 的右侧而不是左侧对齐

Question

我有 2 个 div，一个在另一个之上。您看到红色边框 div 的左侧如何与蓝色边框 div 的左侧对齐了吗？我的问题是，有没有办法让红色边框 div 的右侧与蓝色边框 div 的右侧对齐？

#top {
   border: 1px solid red;
   display: inline-block;
}

#bottom {
   border: 1px solid blue;
   width: 25%;
   display: block;
}

<div id = 'top'> top </div>
<div id = 'bottom'> bottom </div>   

Answer 1

是的，你可以有一个容器并将里面的元素向右浮动:

#top {
   border: 1px solid red;
   display: inline-block;
   float: right;
}

#bottom {
   border: 1px solid blue;
   width: 25%;
   display: block;
   clear:both;
   float: right;
}

#container {
  width: 50%;
}

<div id="container">
    <div id = 'top'> top </div>
    <div id = 'bottom'> bottom </div>
</div>