0

CSS:

.authors {
  background-color: cadetblue;
  height: 600px;
  justify-content: space-between;
}

.plate {
  background-image: url(../images/plate.png);
  background-repeat: no-repeat;
  align-items: center;
  justify-content: center;
  margin-top: 86px;
  height: 540px;
  margin-left: 157px;
  margin-right: 1100px;
}

.plate h2 {
  padding-top: 160px;
  margin-left: 240px;
  font-size: 34px;
  font-family: 'Josefin Sans Light', arial;
}

.plate a {
  color: #a9a9a9;
  margin-top: 10px;
  margin-left: 220px;
  display: block;
  line-break: auto;
}

.karen {
  background-image: url(../images/karen.png);
  background-repeat: no-repeat;
  align-items: center;
  justify-content: center;
  margin-top: 86px;
  height: 540px;
  margin-left: 1100px;
  margin-right: 157px;
  box-shadow: 0px 0px 10px 0.3px grey;
  background-color: #fff;
}

.fail {
  padding-top: 20px;
  margin-right: 165px;
  margin-left: 50.5px;
}

.fail_text {
  font-size: 18px;
}

.plate_button {
  margin-top: 125px;
  margin-left: 210px;
}
HTML:
<div class="authors">

  <div class="plate">
    <div class="fail">
      <a class="fail_text">404</a>
      <hr>
    </div>
    <h2>Sorry</h2>
    <a>WE COULDN’T<br>FIND THE PAGE<br>:(</a>
    <button class="plate_button">
                    BACK
                </button>
  </div>

  <div class="karen">
    <a>Привет</a>
  </div>
</div>

Нужно, чтобы второй блок был на ровне с первым, а получается вот таквведите сюда описание изображения

5
  • какие блоки, пишите более подробный вопрос?
    – SVE
    18 дек 2020 в 11:55
  • Блоки plate и karen
    – Prohor072
    18 дек 2020 в 12:03
  • @Prohor072 а что в итоге вы хотите, чтобы получилось? приложите картинку 18 дек 2020 в 13:20
  • Отредактировал вопрос
    – Prohor072
    18 дек 2020 в 13:36
  • @Prohor072 я бы это слово sorry с тарелкой сделал бы просто картинкой, а не словами 18 дек 2020 в 14:37

1 ответ 1

0

Вы забыли к классу .authors добавить свойство display: flex.

Я закоментировала некоторые свойства за ненадобностью в этом примере.

Очень удобно эксперементировать с расположением элементов вот в этой flex-песочнице - https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/.

.authors {
  background-color: cadetblue;
  height: 600px;
  display: flex; // ВОТ ЭТО СВОЙСТВО УПРАВЛЯЕТ РАСПОЛОЖЕНИЕМ ФЛЕХ-ДЕТЕЙ
  justify-content: space-between;
}

.plate {
  background-image: url(../images/plate.png);
  background-repeat: no-repeat;
  /* align-items: center;
  justify-content: center; */
  margin-top: 86px;
  height: 540px;
  /* margin-left: 157px;
  margin-right: 1100px; */
}

.plate h2 {
  padding-top: 160px;
  margin-left: 240px;
  font-size: 34px;
  font-family: "Josefin Sans Light", arial;
}

.plate a {
  color: #a9a9a9;
  margin-top: 10px;
  margin-left: 220px;
  display: block;
  line-break: auto;
}

.karen {
  background-image: url(../images/karen.png);
  background-repeat: no-repeat;
  align-items: center;
  justify-content: center;
  /* margin-top: 86px; */
  height: 540px;
  /* margin-left: 1100px;
  margin-right: 157px; */
  margin: 25px;
  box-shadow: 0px 0px 10px 0.3px grey;
  background-color: #fff;
}

.fail {
  padding-top: 20px;
  margin-right: 165px;
  margin-left: 50.5px;
}

.fail_text {
  font-size: 18px;
}

.plate_button {
  margin-top: 125px;
  margin-left: 210px;
}
<div class="authors">

  <div class="plate">
    <div class="fail">
      <a class="fail_text">404</a>
      <hr>
    </div>
    <h2>Sorry</h2>
    <a>WE COULDN’T<br>FIND THE PAGE<br>:(</a>
    <button class="plate_button">
                    BACK
                </button>
  </div>

  <div class="karen">
    <a>Привет</a>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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