Нужно сделать шапку, чтобы при любом разрешении экрана расстояние между элементами было одинаковым.
Я решил делать с помощью flex (Может есть варианты лучше?)
Имею такой код:
/* header */
.b-header {
height: 230px;
position: relative;
background: asset-url("x1.png", images) repeat-x;
z-index: 101;
}
.flex {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.b-logo {
left: 130px;
top: 6px;
position: absolute;
}
.b-second-logo {
left: 280px;
top: 3px;
position: absolute;
}
.b-logo-text {
left: 24px;
top: 35px;
position: absolute;
color: #000;
}
.b-logo-text strong {
font-size: 25px;
}
.b-logo-secondary-text {
text-align: center;
font-size: 15px;
}
.b-org-name {
color: #fff;
left: 26%;
top: 2px;
position: absolute;
text-align: center;
width: 300px;
font-size: 14px;
line-height: 14px;
}
.b-org-name strong {
display: block;
font-weight: 400;
font-size: 29px;
line-height: 33px;
text-transform: uppercase;
}
.b-org-info {
right: 32.8%;
top: 9px;
position: absolute;
text-align: center;
padding: 17px 0 0 0;
font-size: 14px;
line-height: 14px;
background: asset-url("clock.png", images) 15px 67px no-repeat;
//background-size: 10px 10px;
}
.b-org-info__address {
display: block;
padding-bottom: 3px;
}
.b-org-info__hint {
color: #ffff00;
font-size: 15px;
position: absolute;
white-space: nowrap;
top: 0px;
left: 71px;
}
<header class="b-header flex">
<a href="" class="b-second-logo"></a>
<a href="" class="b-logo"></a>
<div class="b-logo-text">
<strong> Заголовок </strong>
<div class="b-logo-secondary-text">
Заголовок 2
</div>
</div>
<div class="b-org-info">
<div class="b-org-info__hint"> </div>
<div class="b-org-info__address">
Адрес
</div>
</div>
</header>
Я так понимаю, чтобы шапка стала резиновая мне нужно присвоить ей класс .flex
. Но ничего не меняется. Но когда я прописываю правила из класса .flex
в класс .b-org-info
, тогда один этот блок становится резиновым. В общем-то получается то поведение, которое мне нужно (немного криво элементы ставятся, но пока не об этом).
Как организовать код? и почему не срабатывает код, когда я всей шапке присваиваю класс .flex
?
absolute
вырывает элементы из потока. – YozhEzhi 13 мар '17 в 18:30