Как выровнять блоки в одну линию

Question

Как выровнять блоки в одну линию?

Для позиционирования использовать только <div> и display: block, inline-block, inline.

.container1 {
  border: solid 1px black;
  margin: 1px;
  display: inline-block;
}

.cn1 {
  border: solid 1px black;
  margin: 1px;
}

.cn2 {
  border: solid 1px black;
  display: inline-block;
  text-align: center;
}

<div class="container1">
  <div class="cn1">
    <div class="cn2">Понедельник</div>
    <div class="cn2"> 8.00-9-30 <br> 9.40-11.10 <br> 11.20-12.50</div>
    <div class="cn2"> Проектирование и разработка интерфейса пользователя <br> Проектирование и разработка интерфейса пользователя <br> Графический дизайн и мультимедиа</div>
    <div class="cn2"> 303 <br> 303 <br> 201</div>
  </div>
  <div class="cn1">
    <div class="cn2">Вторник</div>
    <div class="cn2"> 8.00-9-30 <br> 9.40-10.10 <br> 10.20-11.50 <br> 12.00-13.30</div>
    <div class="cn2"> Численные методы <br> Кураторский час<br>Графический дизайн и мультимедиа <br> Численные методы</div>
    <div class="cn2"> 303 <br> 303 <br>303<br> 201</div>
  </div>
  <div class="cn1">
    <div class="cn2">Среда</div>
    <div class="cn2"> 8.00-9-30 <br> 9.40-11.10 <br> 11.20-12.50</div>
    <div class="cn2"> Проектирование и разработка веб приложений <br> Проектирование и разработка веб приложений <br> Проектирование и разработка веб приложений</div>
    <div class="cn2"> 303 <br> 303 <br> 201</div>
  </div>
  <div class="cn1">
    <div class="cn2">Четверг</div>
    <div class="cn2"> 8.00-9-30 <br> 9.40-11.10 <br> 11.20-12.50</div>
    <div class="cn2"> Графический дизайн и мультимедиа <br> Графический дизайн и мультимедиа <br> Графический дизайн и мультимедиа</div>
    <div class="cn2"> 303 <br> 303 <br> 201</div>
  </div>
  <div class="cn1">
    <div class="cn2">Пятница</div>
    <div class="cn2"> 8.00-9-30 <br> 9.40-11.10 <br> 11.20-12.50</div>
    <div class="cn2"> Проектирование и разработка веб приложений <br> Иностранный язык<br> Физкультура</div>
    <div class="cn2"> 303 <br> 303 <br> 201</div>
  </div>
</div>

Answer 1

Использовав фиксированную ширину:

.container1 {
  border: solid 1px black;
  margin: 1px;
  display: inline-block;
  font-size: 0;
}

.cn1 {
  width: 100%;
  border: solid 1px black;
  margin: 1px;
}

.cn2 {
  width: 25%;
  height: 100%;
  border: solid 1px black;
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  box-sizing:border-box;
}
.cn2:nth-child(2) {
  width: 20%;
}
.cn2:nth-child(3) {
  width: 45%;
}
.cn2:nth-child(4) {
  width: 10%;
}

<div class="container1">
  <div class="cn1">
    <div class="cn2">Понедельник</div>
    <div class="cn2"> 8.00-9-30 <br> 9.40-11.10 <br> 11.20-12.50</div>
    <div class="cn2"> Проектирование и разработка интерфейса пользователя <br> Проектирование и разработка интерфейса пользователя <br> Графический дизайн и мультимедиа</div>
    <div class="cn2"> 303 <br> 303 <br> 201</div>
  </div>
  <div class="cn1">
    <div class="cn2">Вторник</div>
    <div class="cn2"> 8.00-9-30 <br> 9.40-10.10 <br> 10.20-11.50 <br> 12.00-13.30</div>
    <div class="cn2"> Численные методы <br> Кураторский час<br>Графический дизайн и мультимедиа <br> Численные методы</div>
    <div class="cn2"> 303 <br> 303 <br>303<br> 201</div>
  </div>
  <div class="cn1">
    <div class="cn2">Среда</div>
    <div class="cn2"> 8.00-9-30 <br> 9.40-11.10 <br> 11.20-12.50</div>
    <div class="cn2"> Проектирование и разработка веб приложений <br> Проектирование и разработка веб приложений <br> Проектирование и разработка веб приложений</div>
    <div class="cn2"> 303 <br> 303 <br> 201</div>
  </div>
  <div class="cn1">
    <div class="cn2">Четверг</div>
    <div class="cn2"> 8.00-9-30 <br> 9.40-11.10 <br> 11.20-12.50</div>
    <div class="cn2"> Графический дизайн и мультимедиа <br> Графический дизайн и мультимедиа <br> Графический дизайн и мультимедиа</div>
    <div class="cn2"> 303 <br> 303 <br> 201</div>
  </div>
  <div class="cn1">
    <div class="cn2">Пятница</div>
    <div class="cn2"> 8.00-9-30 <br> 9.40-11.10 <br> 11.20-12.50</div>
    <div class="cn2"> Проектирование и разработка веб приложений <br> Иностранный язык<br> Физкультура</div>
    <div class="cn2"> 303 <br> 303 <br> 201</div>
  </div>
</div>

Однако это табличные данные, поэтому таблицы вам в руки. На крайняк флексы.

БЛОГ НА HUSL

Как выровнять блоки в одну линию

Ответы (1 шт):