完整定位，需要纯CSS解

Question

经过两天对绝对定位、inline/inline-block 显示、柔性显示等的思考、尝试和试验...我仍然没有找到问题的答案 - "how to style a timestamp's label position, shown on the screenshot below, with pure CSS?"。

条件：

时间戳宽度可以从父块的最小宽度 60px 到最大宽度 100% 不等（父块具有最大宽度值并向右浮动）
如果时间戳小于 100%（例如 50%），则其左侧的 space 应填充文本，并且时间戳始终向右对齐[=29= ]
如果文本和时间戳小于父项的最大宽度 - 它们显示在一行中（如屏幕截图中的第一条和第二条消息）
如果时间戳无法与文本放在一行中 - 它会下降并右对齐[=29=]
如果文本不能放在一行中（如屏幕截图中的第 3 条消息），则会在第二行显示时间戳，对齐到右边，并且不挡住上面的space

到目前为止，我只能用 JS 实现它，但我相信它可以用纯 CSS 实现。

更新：我已经为你们添加了一个沙箱示例，代码很粗略，如果你们愿意帮助我的话http://jsbin.com/gatifevowu/2/edit?html,css,output

Answer 1

不过我没有检查所有条件，这应该可行：

CSS

.chat-message {
  clear: both;
  max-width: 450px;
  min-height: 38px;
  line-height: 18px;
  padding: 10px;
  box-shadow: 0 0.5px 1.5px 0 rgba(0,0,0,0.33);
  border-radius: 4px;
  float: right;
  background-color: $white-gray;
}
.chat-message__text {
  display: inline;
}
.chat-message__timestamp {
  float: right;
}

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div class="chat-message">
    <div class="chat-message__text">Test message</div>
    <span class="chat-message__timestamp">10:34 am</span>
  </div>
  <div class="chat-message">
    <div class="chat-message__text">Test message message message message message message message message message</div>
    <span class="chat-message__timestamp">10:34 am</span>
  </div>
  <div class="chat-message">
    <div class="chat-message__text">Test message</div>
    <span class="chat-message__timestamp">10:34 am</span>
  </div>

</body>
</html>

Fiddle

Answer 2

Flexbox 解决方案...只需要一个小的 HTML 结构更改。

.chat-message {
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  display: flex;
  justify-content: flex-end;
}
.chat-message__text {
  text-align: right;
}
.chat-message__timestamp {
  white-space: nowrap;
  padding-left: 1em;
  background: #c0ffee;
}

<div class="chat-message">
  <div class="chat-message__text">Test message 
    <span class="chat-message__timestamp">10:34 am</span>
  </div>

</div>
<div class="chat-message">
  <div class="chat-message__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo aperiam numquam ullam error, inventore molestias illo voluptatibus perspiciatis? Ducimus, numquam,  
    <span class="chat-message__timestamp">10:34 am</span>
  </div>
</div>
<div class="chat-message">
  <div class="chat-message__text">Lorem ipsum dolor sit.
    <span class="chat-message__timestamp">10:34 am</span>
  </div>

</div>

完整定位，需要纯CSS解

Comple positioning, need pure CSS solution

html

css

position

css-position

pure-css