2

HTML:

<div class:"1">
</div>
<div class:"2">
</div>

Как заCSSсить так, что бы они оказались под друг другом (вертикально)?

введите сюда описание изображения

1
  • 1
    Разделять атрибут от параметра должен знак равно (=), а не двоеточие (:)
    – De.Minov
    14 авг 2020 в 5:40

3 ответа 3

4

Дайте родительскому элементу:

display: flex;
flex-direction: column;

Полный пример:

h1 {
  color: white;
  text-align: center;
  margin: auto;
}

.parent {
  width: fit-content;
  height: fit-content;
  background-color: rgb(200, 200, 200);
  padding: 5px;
  display: flex;
  flex-direction: column;
}

.parent div {
  width: 200px;
  height: 100px;
  background-color: rgb(100, 100, 100);
  margin: 5px;
  display: flex;
}
<div class="parent">
  <div class="1">
    <h1>
      1
    </h1>
  </div>
  <div class="2">
    <h1>
      2
    </h1>
  </div>
</div>

1

Они и сами по себе друг под другом встают.

1

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 100%;
}
<div class="container">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
</div>

6
  • Можете, пожалуйста, написать и html, в котором есть classы 16 авг 2020 в 7:43
  • Дополнил код, проверяйте 16 авг 2020 в 11:42
  • 1
    @TaskeMiura таким образом они встанут в линию, а не в столбец, как хочет автор 16 авг 2020 в 11:44
  • @Михаил Камахин, таким образом весь контент в контейнере не будет в колонку. Спорить не буду, по мне оба варианта верны. 17 авг 2020 в 7:11
  • @TaskeMiura вставил ваш код в сниппет stackoverflow, смотрите сами 17 авг 2020 в 9:05

Ваш ответ

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

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