在前端開發過程中，常常會遇到需要兩個<div>元素并排顯示的情況。而有時候，我們希望其中一個<div>靠右顯示，這樣可以更好地適應頁面的布局需求。本文將詳細介紹如何使用HTML和CSS來實現這一效果。

案例一：使用浮動來布局

一種常見的方法是使用CSS的浮動屬性來實現兩個<div>并排顯示的效果，并通過設置相應的CSS來讓其中一個<div>靠右顯示。

<style>
.container {
width: 100%;
}
<br>
    .left-div {
float: left;
width: 50%;
background-color: #f5f5f5;
}
<br>
    .right-div {
float: right;
width: 50%;
background-color: #e0e0e0;
}
</style>
<br>
  <div class="container">
<div class="left-div">Left DIV</div>
<div class="right-div">Right DIV</div>
</div>

在上述示例中，我們通過設置左側<div>的float屬性為left，右側<div>的float屬性為right來使它們并排顯示。由于浮動元素會脫離文檔流，因此需要在外層容器<div class="container">中添加clearfix來清除浮動，確保其它內容正常顯示。

案例二：使用Flexbox布局

另一種實現方式是使用CSS的Flexbox布局，它是目前最常用的響應式布局方式之一。

<style>
.container {
display: flex;
}
<br>
    .left-div {
flex-grow: 1;
background-color: #f5f5f5;
}
<br>
    .right-div {
background-color: #e0e0e0;
}
</style>
<br>
  <div class="container">
<div class="left-div">Left DIV</div>
<div class="right-div">Right DIV</div>
</div>

在上述示例中，我們通過設置外層容器<div class="container">的display屬性為flex，使其成為一個Flex容器。通過設置左側<div>的flex-grow屬性為1，使其占據可用空間的比例為1，而右側<div>默認為0，即不會占據可用空間，從而實現了右側<div>的靠右顯示。

以上是兩種常見的實現兩個<div>并排顯示并讓其中一個靠右的方法。根據具體需求和場景，我們可以選擇適合的方法來實現頁面效果，并進行相應的樣式調整。希望本文對您理解并實現<div>的靠右布局有所幫助。