Question

有两个块，其中有一个可变长度的文本有必要在右侧放置一个块，然后将第二个块连接到该块。如果第二个块的文本较大，则将其移动到下面的行。

<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>

我试图这样做。

<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>

但是没有任何反应，带有用户名的块位于正确的块上

>如何使块不会彼此碰到并且如果文本没有输入则将文本转移到新行？

Answer 1

使用flexbox可以轻松实现您的目标。这些项目将保持向右对齐，如果它们不能排成一行，则其中一些将移至下一行。

.wrapper {
  display: flex;
  justify-content: flex-end;
  flex-flow: row wrap;
}

<div class="wrapper">
  <div class="item">
    You are logged on as a user <span>{username}</span>
  </div>
  <div class="item">
  {someText}
  | <a href="#">Change password</a>
  | <a href="#">Exit</a>
  </div>
</div>

Answer 2

这应该对您有用：

<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>

浮子将其移到右侧，而定位则根据需要将内容移到下一行。

两个元素的位置

2 个答案: