1

имеется html:

<div class="class">
    <div class="green_fon">
        привет андрей
        <div class="blue_fon">внутри андр</div>
    </div>
    <div class="green_fon2">
        привет паша
    </div>
</div>

так же есть css:

.green_fon{ /* div */
  display: inline-block;
  background: #7def72;
  font-size: 15px;
  border-top: 5px solid #001f3f;

  margin-left: 1;
  margin-right: 1;
  margin-top: 5px;
  margin-bottom: 5px;

  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;

}
.blue_fon{ /* div */
  display: inline-block;
  background: #48cae2;
  font-size: 15px;
  border-top: 5px solid #001f3f;

  margin-left: 1;
  margin-right: 1;
  margin-top: 4px;
  margin-bottom: 4px;

  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.green_fon2{ /* div */
  display: inline-block;
  background: #7def72;
  font-size: 15px;
  border-top: 5px solid #001f3f;

  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;

  margin-left: 1;
  margin-right: 1;
  margin-top: 5px;
  margin-bottom: 5px;

}
.class{
  box-sizing: border-box;
  border: 1px solid red;
  justify-content: space-between;
}

картинка

Не могу сделать так, чтобы эти два 'зеленых' были одинаковый высоты и выровнены. желательно добиться так, чтобы они были одного класса, но это не принципиально. снаружи висит вспомогательный div, я пробовал растянуть divы внутри до его границ.

1 ответ 1

2

Воспользуйся flexbox'ом,

.class{
display: flex;
justify-content: space-between;
}

после этого элементы станут в одну линию. затем.. удалите margin везде, у вас будет что-то типа

[1]: https://i.stack.imgur.com/RLJpw.png

затем напишите в хтмл вместо class="green_fon" => class="green_fon first" а второй класс class="green_fon2" станет таким => class="green_fon" в css добавьте:

.first{
display: flex;
justify-content: start-end;
margin-right: 10px;
}

Например, так

1
  • Cпасибо огромное, все работает.
    – YaAlex
    25 апр 2021 в 12:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.