0

经过两天的思考、尝试和尝试绝对定位、内联/内联块显示、弹性显示等......我仍然没有找到问题的答案 - “如何设置时间戳的标签位置，显示在下面的截图，纯CSS？”。

在此处输入图像描述

条件：

  1. 时间戳宽度可以从最小宽度 60px 到最大宽度 100% 的父块（父块具有最大宽度值并向右浮动）
  2. 如果时间戳小于 100%（例如 50%），它左边的空间应该用文本填充，并且时间戳总是向右对齐
  3. 如果文本和时间戳小于父母最大宽度 - 它们显示在单行上（如屏幕截图上的第一条和第二条消息）
  4. 如果时间戳不能与文本放在一行中 - 它会下降并向右对齐
  5. 如果文本不能放在一行中（如屏幕截图中的第 3 条消息），则会在第二行显示一个时间戳，向右对齐，并且不会阻塞其上方的空间

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

UPD：我为你们添加了一个沙箱示例，带有粗略的代码，如果你想帮助我http://jsbin.com/gatifevowu/2/edit?html,css,output

4

2 回答 2

2

我没有检查所有条件，这应该有效：

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>

小提琴

于 2016-06-18T22:03:35.157 回答
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>

于 2016-06-18T22:05:47.907 回答