Мой макет в настоящее время разбивается на разрешение 320 пикселей (.info падает ниже .icon и разбивает макет), и я теряюсь относительно того, как предотвратить его разрыв.Обновить элемент sibling css на основе ширины предыдущего элемента в ответном макете
Инновация (номер) загружается динамически и может быть чем угодно: от 0 до 2147483647. Если разрешение экрана недостаточно велико, чтобы показать .num и .unread на одной строке, вместо того чтобы ломаться, Я хотел бы, чтобы .unread выпадал на следующую строку (display: block применяется к ней?). Я попытался придумать способ использования только css, но хотя я мог бы использовать js для применения класса, если присутствует более двух цифр, но это направление по-прежнему кажется неправильным, если разрешение шире и может отображать больше цифр. E.G - 1000px может показать еще много цифр ... Я бы хотел, чтобы он остался на одной линии в этом случае.
Мой код ниже:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
display:block;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left: 15px;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:10px 0;
}
.num {
font-weight:bold;
font-size:20px;
}
.unread {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">23</a>
<span class="unread">Unchecked Voicemails to Date</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/18Mids4M3SupNwOT8ocP?p=preview