0

絶対配置、インライン/インラインブロック表示、フレックス表示などを2日間考え、試行錯誤した後...私はまだ質問に対する答えを見つけられませんでした-「タイムスタンプのラベル位置をスタイルする方法は、純粋な CSS を使用した下のスクリーンショット?".

ここに画像の説明を入力

条件：

  1. タイムスタンプの幅は、親ブロックの min-width 60px から max-width 100% までさまざまです (親には max-width 値があり、右にフロートします)。
  2. タイムスタンプが 100% より小さい場合 (例: 50%)、その左側のスペースはテキストで埋められ、タイムスタンプは常に右揃えになります。
  3. テキストとタイムスタンプが親の最大幅よりも小さい場合 - それらは 1 行に表示されます (スクリーンショットの 1 番目と 2 番目のメッセージのように)
  4. タイムスタンプがテキストの 1 行に収まらない場合 - ドロップダウンして右揃え
  5. テキストが 1 行に収まらない場合 (スクリーンショットの 3 番目のメッセージのように)、タイムスタンプが 2 行目に表示され、右揃えになり、その上のスペースをブロックしません。

今までは JS でしか実現できませんでしたが、純粋な CSS で動作させることは可能だと思います。

UPD: http://jsbin.com/gatifevowu/2/edit?html,css,outputを手伝いたい場合は、サンドボックスの例を大まかなコードで追加しました。

4

2 に答える 2

2

フレックスボックス ソリューション...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 に答える
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 に答える