完全な位置決め、純粋なCSSソリューションが必要

-1

絶対的な位置付け、インライン/インラインブロック表示、フレックス表示などを考えて試してみて2日後...私はまだ質問に対する答えを見つけられませんでした - 下のスクリーンショットに示されているタイムスタンプのラベル位置を、純粋なCSSでスタイルする方法は？ "完全な位置決め、純粋なCSSソリューションが必要

条件：

タイムスタンプ幅は、親ブロックの最大幅100％に最小幅60PXから変化することができる（親が最大幅値を有し、右フロート）
タイムスタンプが100％（たとえば50％）より小さい場合は、その左側のスペースにテキストを埋め、タイムスタンプは常に右に揃えます
テキストとタイムスタンプが両親の最大幅よりも小さい - 彼らは笑っている1行目のwn（スクリーンショットの1番目と2番目のメッセージのように）
タイムスタンプがテキスト付きの1行に収まらない場合は、ドロップダウンして右に揃えます
テキストが '単一行でトンフィットは（スクリーンショットの第三のメッセージのような）、タイムスタンプが右がに合わせ、二行目に示されており、これまでのところ、私はそれに達する可能性があること

上の空間をブロックしませんJSだけでは、純粋なCSSで動作させることは可能だと私は信じています。

UPD：

：あなたは私のhttp://jsbin.com/gatifevowu/2/edit?html,css,output

出典

2016-06-18 Mihail

申し訳ありませんがみんな、私が最初の場所でサンドボックスへのリンクを追加しましたが、その時、私はインドを通過するた、インターネットがひどいと思ったので、私はしませんでしたダブルチェック。しかし、少し遅れてリンクを更新しました。 @ j08691今日、人々はあなたのようにあまりにも疑わしいです。あなたがそれを気に入らなければ、真剣にそれを渡してください。モデレーターは、価値のない投稿を削除します。そして、誤解に対する私の謝罪。 – Mihail

を助けたいと思うならば、私は、私は、しかし、すべての条件をチェックしませんでした、これは動作するはずです、ラフコードで、君たちのためのサンドボックスの例を追加しました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

出典

2016-06-18 22:03:35

ありがとう、私はあなたのコードを取って、それが私が探していた解決策になったいくつかの変更と！ – Mihail

@Mihail Gladが役立ちます。 –

フレックスソリューション...マイナーな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-18 22:05:47

何らかの理由で、このコードが私のプロジェクトで同じように動作していないため、おそらく何か不足しています。解決策は素晴らしいですが。ありがとう！ – Mihail

完全な位置決め、純粋なCSSソリューションが必要

答えて

関連する問題