Завершение установки, требуется чистое решение для CSS

-1

После двух дней размышлений и попыток и экспериментов с абсолютным позиционированием, встроенным/встроенным блоком, гибким дисплеем и т. Д. Я все еще не нашел ответа на вопрос - как стилизовать положение метки метки, показанное на скриншоте ниже, с чистым CSS? ».Завершение установки, требуется чистое решение для CSS

Условия:

ширина метки времени может варьироваться от мин-ширина 60px до макс ширины 100% от родительского блока (родитель имеет максимальную ширину значение и плавают справа)
Если метка времени меньше 100% (например, 50%), то поле слева от нее должно быть заполнено текстом, а метка времени всегда выровнена вправо
, если текст и временная метка меньше родителей max-width - они шо wn на одной строке (например, 1-е и 2-е сообщения на скриншоте)
Если временная метка не может поместиться в одну строку с текстом - она опускается вниз и выравнивается вправо
и если текст может ' т помещается в одной строке (например, 3-сообщения на скриншоте), метка времени отображается на второй линии, выравнивается право, и не блокирует пространство над ней

до сих пор я мог добраться до него только с 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, что помогает. –

решение 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-18 22:05:47

По какой-то причине этот код не работает таким же образом в моем проекте, возможно, я что-то упустил. Хотя решение велико. Благодаря! – Mihail

Завершение установки, требуется чистое решение для CSS

ответ

Смежные вопросы