Html 两个要素的定位

有两个块中有可变长度的文本 必须将一个块放在右侧，并将第二个块连接到它。如果第二个块有一个大的文本，那么它被移动到下面的一行

<div style="text-align:right;">
    <span>
      You are logged on as a user <span>{username}</span>

         {sometext}
          | <a href="#">Change password</a>
          | <a href="#">Exit</a>
    </span>
</div>

您是以用户{username}登录的
{sometext}
| 
| 

我试着这么做

<div style="position:relative;">
    <span>
      <div style="position:absolute; right: 250px;">
        You are logged on as a user <span>{username}</span>
      </div>
      <div style="position:absolute; top:0; right:0;">
        {someText}
          | <a href="#">Change password</a>
          | <a href="#">Exit</a>
      </div>
    </span>
</div>

您是以用户{username}登录的
{someText}
| 
| 

但什么也没发生，用户名所在的街区位于右侧街区

---

如何使块之间不发生碰撞，并且如果未输入文本，则将文本传输到新行？

这应该适用于您：

<div style="position:relative; float: right;">
  <div style="position:relative; right: 0;">
    You are logged on as a user <span>{username}</span>
  </div>
  <div style="position:relative; top:0; right:0;">
    {someText}
      | <a href="#">Change password</a>
      | <a href="#">Exit</a>
  </div>

您是以用户{username}登录的
{someText}
| 
| 

---

浮点数将其移到右边，定位将其移到您需要的下一行。

这应该适合您：

<div style="position:relative; float: right;">
  <div style="position:relative; right: 0;">
    You are logged on as a user <span>{username}</span>
  </div>
  <div style="position:relative; top:0; right:0;">
    {someText}
      | <a href="#">Change password</a>
      | <a href="#">Exit</a>
  </div>

您是以用户{username}登录的
{someText}
| 
| 

---

浮点数将其移到右边，而定位则将其移到您需要的下一行。

使用flexbox，您的目标很容易实现。项目将保持向右对齐，如果它们不能放在一行中，其中一些将移动到下一行

.wrapper{
显示器：flex；
证明内容：柔性端；
柔性流：行换行；
}

您是以用户{username}登录的
{someText}
| 
| 

使用flexbox，您的目标很容易实现。项目将保持向右对齐，如果它们不能放在一行中，其中一些将移动到下一行

.wrapper{
显示器：flex；
证明内容：柔性端；
柔性流：行换行；
}

您是以用户{username}登录的
{someText}
| 
| 

我建议使用此

flexbox

答案，我下面的答案是尝试使用他知道的定位设置，但不太好：因为

flexbox

取代了这些老式的定位方式，这确实是实现这一点的最佳方法。我建议使用此

flexbox

答案，我下面的回答是尝试使用他所知道的定位设置，但这并不是很好：因为

flexbox

取代了这些老式的定位方式，这确实是实现这一点的最佳方式。