Как поместить 5 div внутри 1 div? - PullRequest
Новая
       0

Как поместить 5 div внутри 1 div?

0 голосов
/ 06 мая 2020

Мне нужно сделать это:

  • контейнер div 800x600 пикселей
  • заголовок div 800x150 пикселей
  • div под заголовком 800x50 пикселей
  • меню div 200x350 пикселей
  • содержимое div 600x350 пикселей
  • нижний колонтитул div 800x50 пикселей

Мне нужно поместить все эти 5 div внутрь 1 div, каждый div должен иметь разные цвета.

Ответы [ 3 ]

0 голосов
/ 06 мая 2020

CSS макет сетки является одним из вариантов здесь: 

<!DOCTYPE html>
<html>
    <head>
        <title>SO 61631033: how-to-put-3-divs-inside-1-div</title>
        <style type="text/css">
            #container {
                display: grid;
                grid-template-areas:
                    "h  h"
                    "sh sh"
                    "m  c"
                    "f  f";
                grid-template-rows:     150px 50px 350px 50px;
                grid-template-columns:  200px 600px;
                
                width:  800px;
                height: 600px;
            }
            
            #content {
                background-color:   darkgreen;
                grid-area:          c;
            }
            #footer {
                background-color:   orange;
                grid-area:          f;
            }
            #header {
                background-color:   pink;
                grid-area:          h;
            }
            #menu {
                background-color:   green;
                grid-area:          m;
            }
            #subheader {
                background-color:   yellow;
                grid-area:          sh;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header"></div>
            <div id="subheader"></div>
            <div id="footer"></div>
            <div id="menu"></div>
            <div id="content"></div>
        </div>
   </body>
</html>

Разработайте этот дизайн, начав с прямоугольного angular тесселяции области экрана. Каждый прямоугольник представляет собой контейнерный элемент в html. Наложите сетку со всеми границами плитки на линии сетки. Сетка не требует равномерного размещения в любом измерении. Эта сетка является основой для свойства grid-template-areas CSS, которое очевидным образом отражает тесселяцию.

Существует множество дополнительных опций для определения макета сетки, особенно настроенных на более регулярные мозаики. В MDN есть свой собственный раздел по макетированию с помощью этой методологии.

Если поддержка различных устройств и адаптивный дизайн имеют первостепенное значение, гибкий макет лучше подойдет для этой задачи.

0 голосов
/ 06 мая 2020

Все, что вам нужно сделать, это просто назначить высоту каждому элементу и ширину в соответствии с вашими потребностями, остальное дайте display:flex; flex-wrap: wrap его родителю, и он все обработает 

* {margin: 0; padding:0; box-sizing: border-box;}
.wrapper {max-width: 800px; width: 100%; margin: 0 auto;display: flex;flex-wrap: wrap;}
header {
  height: 150px;
  background-color: #FF009C;
  width: 100%;
}
.yellow50 {
  height: 50px;
  background-color: #D8FF00;
  width: 100%;
}
.blue350, .orange350 {height: 350px; width: 50%;}
.blue350 {
  background-color: #03907A;
}
.orange350 {
  background-color: #FF7E00;
}
footer {
  height: 50px;
  background-color: #0B561B;
  width: 100%;
}
<section class="wrapper">
  <header></header>
  <div class="yellow50"></div>
  <div class="blue350"></div>
  <div class="orange350"></div>
  <footer>  
</section>
0 голосов
/ 06 мая 2020

По умолчанию элементы уровня блока расширяются до 100% ширины содержащего элемента, а их высота определяется их содержимым. Таким образом, большая часть работы здесь уже сделана за вас по умолчанию.

Вы можете установить ширину для содержащего элемента и высоту для внутреннего элемента. Это доставит вас почти до конца. Вам просто нужно, чтобы меню и контент располагались рядом. Вы можете сделать это с помощью CSS grid, flexbox, display: table или float.

Кроме того, элементы <div> здесь неправильный выбор. HTML включает множество различных типов элементов, таких как <header>, <footer>, <nav> и <main>, которые вам следует рассмотреть.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...