@dqwe93

Как спозиционировать блок согласно БЭМ?

Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование


Помогите переделать этот код https://jsfiddle.net/j32kv7tz/2/ так, чтобы блоки можно было без проблем менять местами. Сейчас блок с float:right невозможно поменять местами
  • Вопрос задан
  • 636 просмотров
Пригласить эксперта
Ответы на вопрос 3
@senselessV7
HTML:

<header class="header">
  <div class="header-form">
    <div class="form">float:right</div>
  </div>
  <div class="header-logo">
    <div class="logo">float:left</div>
  </div>
  <div class="header-search">
    <div class="search">float:left</div>
  </div>
</header>


CSS:

.header {
  background-color: red;
  width: 100%;
  height: 400px;
}

.header-form {
  float: right;
  width: 20%;
}

.header-logo {
  float: left;
  width: 30%;
}

.header-search {
  float: left;
  width: 50%;
}

.logo {
  height: 50px;
  background-color: blue;
}

.search {
  background-color: green;
  height: 50px;
}

.form {
  background-color: orange;
  height: 50px;
}
Ответ написан
SkiperX
@SkiperX Куратор тега CSS
Блоки позиционируются через элемент родителя
в .header нужен .header__form которому будут заданы позиционирование и размеры
в него положи .form сам блок, который примет размер .header__form

про поменять местами, тут можно задать float всем в одну сторону. А лучше разбирай сетки на флекс
Ответ написан
@takitak
<header class="header">

    <div class="form header__form">float:right</div>
    <div class="logo header__logo ">float:left</div>
    <div class="search header__search">float:left</div>
</header>


.header__form
  float:right;

.header__logo
  float:left;

.header__search
  float:left;
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы