БЛОГ НА HUSL


HTML, CSS, Верстка блоков в определенном положении, показано на картинке

Автор вопроса: Константин 

*{
    box-sizing: border-box;
}

body {
   
    background: #c7b39b url(/img/fon.jpg) no-repeat 0 / cover;
    color: #ba1c85; 
    background-attachment: fixed;
    background-position: center top;
    /* border-radius: .2rem; */
}

/*Секция расписания*/


.timeTables{
   margin: 0 auto; 
    width: 100%;
    height: 100%; /*1000px; auto;*/
    border-radius: 5px;
    background-color: white;
    opacity: 0.9;
    padding: 10px;
}


.block{

    float: left;
    margin: 0 auto;
    margin-top: 10px;
    padding: 30px;
    background-color: #12ffa8;
    border-radius: 5px;
    width: 280px;
    height: auto;
    margin-right: 10px;
    
}


.tableBlock{
    border:0;
    text-align: left;
}


.h3 {
    max-width: 100%;
    min-width: 100%;
    font-style: italic;
    font-size: 25px;
    color: black;
   text-align: center;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="AdminMenu.css">
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>


<section class="timeTables">
    <div class="block">
        <h3 class="h3">Лечебно оздоровительный комплекс</h3>
            <table class="tableBlock">
               <tr><th>Понедельник: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Вторник: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Среда: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Четверг: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Пятница: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Суббота: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Воскресенье: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Перерыв: </th><th>13:00</th><th>-</th><th>14:00</th></tr>
            </table>
    </div>
    <br>
    <div class="block">
        <h3 class="h3">Столовая</h3>
            <table class="tableBlock">
                <tr><th>Завтрак: </th><th>9:00</th><th>-</th><th>10:00</th></tr>
               <tr><th>Обед: </th><th>13:00</th><th>-</th><th>14:00</th></tr>
               <tr><th>Полдник: </th><th>16:30</th><th>-</th><th>16:45</th></tr>
               <tr><th>Ужин: </th><th>19:00</th><th>-</th><th>19:30</th></tr>
            </table>
    </div>
<br>

    <div class="block">
        <h3 class="h3">Мед кабинеты</h3>
            <table class="tableBlock">
               <tr><th>Понедельник: </th><th>9:00</th><th>-</th><th>16:00</th></tr>
               <tr><th>Вторник: </th><th>9:00</th><th>-</th><th>16:00</th></tr>
               <tr><th>Среда: </th><th>9:00</th><th>-</th><th>16:00</th></tr>
               <tr><th>Четверг: </th><th>9:00</th><th>-</th><th>16:00</th></tr>
               <tr><th>Пятница: </th><th>9:00</th><th>-</th><th>16:00</th></tr>
               <tr><th>Суббота: </th><th></th><th>-</th><th></th></tr>
               <tr><th>Перерыв: </th><th></th><th>-</th><th></th></tr>
               <tr><th>Перерыв: </th><th>13:00</th><th>-</th><th>14:00</th></tr>
            </table>
    </div>
<br>
    <div class="block">
        <h3 class="h3">Клуб</h3>
            <table class="tableBlock">
               <tr><th>Понедельник: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Вторник: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Среда: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Четверг: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Пятница: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Суббота: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Воскресенье: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Перерыв: </th><th>13:00</th><th>-</th><th>14:00</th></tr>
            </table>
    </div>
<br>
    <div class="block">
        <h3 class="h3">Прокат</h3>
            <table class="tableBlock">
              <tr><th>Понедельник: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Вторник: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Среда: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Четверг: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Пятница: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Суббота: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Воскресенье: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Перерыв: </th><th>13:00</th><th>-</th><th>14:00</th></tr>
            </table>
    </div>
<br>

</section>

</body>
</html>

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

Доброго времени суток!

Кто поможет сверстать блоки так, как показано на картинке?

Или может есть сопутствующая информация, статьи и тд, буду рад любой помощи


Источник

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

Автор решения: Max Watson

Вы можете использовать Bootstrap. Вот самый простой пример использования, почитайте более подробно в документации.

*,
*::before,
*::after{
  box-sizing: border-box;
}

.one__some {
  width: 100%;
  height: 50vh;
  background-color: green;
  margin: 5px 5px;
}
.one__someOne {
  width: 100%;
  height: 50vh;
  background-color: green;
  margin: 5px 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<div class="div row">
  <div class="one col-4">
    <div class="one__some"></div>
    <div class="one__someOne"></div>
  </div>
  <div class="two col-4">
    <div class="one__some"></div>
    <div class="one__someOne"></div>
  </div>
  <div class="three col-4">
     <div class="one__some"></div>
  </div>
</div>
  
</body>
</html>

→ Ссылка
Автор решения: Bear Vorkuta

Можно сделать три вертикальных контейнера и сгруппировать ваши block как вам надо

*{
    box-sizing: border-box;
}

body {
   
    background: #c7b39b url(/img/fon.jpg) no-repeat 0 / cover;
    color: #ba1c85; 
    background-attachment: fixed;
    background-position: center top;
    /* border-radius: .2rem; */
}

/*Секция расписания*/


.timeTables{
   margin: 0 auto; 
    width: max-content;
    height: 100%; /*1000px; auto;*/
    border-radius: 5px;
    background-color: white;
    opacity: 0.9;
    padding: 10px;
    display: flex;
    gap: 10px;
}


.block{    
    margin: 0 auto;
    margin-bottom:10px;
    padding: 30px;
    background-color: #12ffa8;
    border-radius: 5px;
    width: 280px;
    height: auto;    
}


.tableBlock{
    border:0;
    text-align: left;
}


.h3 {
    max-width: 100%;
    min-width: 100%;
    font-style: italic;
    font-size: 25px;
    color: black;
   text-align: center;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="AdminMenu.css">
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>


<section class="timeTables">
   <div class="block-wrapper">
     <div class="block">
          <h3 class="h3">Лечебно оздоровительный комплекс</h3>
              <table class="tableBlock">
                 <tr><th>Понедельник: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
                 <tr><th>Вторник: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
                 <tr><th>Среда: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
                 <tr><th>Четверг: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
                 <tr><th>Пятница: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
                 <tr><th>Суббота: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
                 <tr><th>Воскресенье: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
                 <tr><th>Перерыв: </th><th>13:00</th><th>-</th><th>14:00</th></tr>
              </table>
      </div>
      <div class="block">
        <h3 class="h3">Прокат</h3>
            <table class="tableBlock">
              <tr><th>Понедельник: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Вторник: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Среда: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Четверг: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Пятница: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Суббота: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Воскресенье: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Перерыв: </th><th>13:00</th><th>-</th><th>14:00</th></tr>
            </table>
      </div>
    </div>

    <div class="block-wrapper">
    <div class="block">
        <h3 class="h3">Столовая</h3>
            <table class="tableBlock">
                <tr><th>Завтрак: </th><th>9:00</th><th>-</th><th>10:00</th></tr>
               <tr><th>Обед: </th><th>13:00</th><th>-</th><th>14:00</th></tr>
               <tr><th>Полдник: </th><th>16:30</th><th>-</th><th>16:45</th></tr>
               <tr><th>Ужин: </th><th>19:00</th><th>-</th><th>19:30</th></tr>
            </table>
    </div>
      <div class="block">
        <h3 class="h3">Клуб</h3>
            <table class="tableBlock">
               <tr><th>Понедельник: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Вторник: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Среда: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Четверг: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Пятница: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Суббота: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Воскресенье: </th><th>9:00</th><th>-</th><th>19:00</th></tr>
               <tr><th>Перерыв: </th><th>13:00</th><th>-</th><th>14:00</th></tr>
            </table>
    </div>
    </div>

    <div class="block-wrapper">
    <div class="block">
        <h3 class="h3">Мед кабинеты</h3>
            <table class="tableBlock">
               <tr><th>Понедельник: </th><th>9:00</th><th>-</th><th>16:00</th></tr>
               <tr><th>Вторник: </th><th>9:00</th><th>-</th><th>16:00</th></tr>
               <tr><th>Среда: </th><th>9:00</th><th>-</th><th>16:00</th></tr>
               <tr><th>Четверг: </th><th>9:00</th><th>-</th><th>16:00</th></tr>
               <tr><th>Пятница: </th><th>9:00</th><th>-</th><th>16:00</th></tr>
               <tr><th>Суббота: </th><th></th><th>-</th><th></th></tr>
               <tr><th>Перерыв: </th><th></th><th>-</th><th></th></tr>
               <tr><th>Перерыв: </th><th>13:00</th><th>-</th><th>14:00</th></tr>
            </table>
    </div>
    </div>

  
</section>

</body>
</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.