Как использовать div для компоновки панели навигации, двух столбцов div и нижнего div - PullRequest
Новая
       0

Как использовать div для компоновки панели навигации, двух столбцов div и нижнего div

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

Я пытаюсь сделать следующий макет: div layout

И у меня есть этот код для панели навигации: 

<nav>
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Book summary</a></li>
              <li><a href="#">About us</a></li>
              <li><a href="#">Contact us</a></li>
              <li><a href="#">Purchase</a></li>
            </ul>
          </nav>

, тогда у меня есть два столбца div, например: 

<div class="row">
          <div class="column" style="background-color:none;">
            <h2>bla bla bla</h2>
            <p>
            <img src="https://i.imgur.com/ZdhtRrp.png"  alt="bookshelf">
            </p>
          </div>
          <div class="column" style="background-color:none;">

Как сделать нижний div под div с двумя столбцами

Ответы [ 4 ]

2 голосов
/ 27 мая 2020

Этого можно добиться с помощью системы flexbox или grid .

  1. Flexbox . Все, что вам нужно сделать, это настроить отображение элемента упаковки на гибкость, а затем выполнить горизонтальное выравнивание элемента с помощью justify-content и вертикальное выравнивание с помощью align-items. 

nav>ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

nav>ul>li {
  margin: 0 10px;
}

.row {
  display: flex;
  align-items: center;
}

.row>.column {
  margin: 0 5px;
  padding: 5px;
}

.bottom-row {
  display: flex;
  justify-content: center;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Book summary</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">Purchase</a></li>
  </ul>
</nav>

<div class="row">
  <div class="column" style="background-color:none;">
    <h2>bla bla bla</h2>
    <p>
      <img src="https://i.imgur.com/ZdhtRrp.png" alt="bookshelf">
    </p>
  </div>
  <div class="column" style="background-color:none;">this is another column</div>
</div>

<div class="bottom-row">bottom row</div>
Сетка . сетка будет примерно такой. Чтобы добиться этого с помощью сетки, вы должны заранее определить макет страницы с помощью grid-template-areas, а затем указать каждый элемент, который будет располагаться на своем месте. 

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "nav nav" "column1 column2" "bottom-row bottom-row";
  width: 100%;
  height: 100%;
  margin: 0;
}

nav {
  grid-area: nav;
  align-self: center;
}

.column1 {
  grid-area: column1;
}

.column2 {
  grid-area: column2;
  align-self: center;
}

.bottom-row {
  grid-area: bottom-row;
  justify-self: center;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Book summary</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">Purchase</a></li>
  </ul>
</nav>

<div class="column1" style="background-color:none;">
  <h2>bla bla bla</h2>
  <p>
    <img src="https://i.imgur.com/ZdhtRrp.png" alt="bookshelf">
  </p>
</div>
<div class="column2" style="background-color:none;">this is another column</div>

<div class="bottom-row">bottom row</div>

Дополнительные примечания по системе сеток

Для начала вам необходимо определить элемент контейнера как сетку с display: grid задайте размеры столбца и строки с помощью grid-template-columns и grid-template-rows, а затем поместите его дочерние элементы в сетку с помощью grid-column и grid-row.

  • display: grid. Определяет элемент как контейнер сетки и устанавливает новый контекст форматирования сетки для его содержимого.

  • grid-template-rows или grid-template-columns. Определяет столбцы и строки сетки со списком значений, разделенных пробелами. Значения представляют размер дорожки, а пространство между ними представляет линию сетки.

  • grid-column или grid-row. Сокращение для grid-column-start + grid-column-end и grid-row-start + grid-row-end соответственно.

1 голос
/ 27 мая 2020 
i would go with a grid system
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid Layout</h1>

<p>This grid layout contains six columns and three rows:</p>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>
1 голос
/ 27 мая 2020

Вы можете использовать сетку : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas: 
                "nav nav"
                "div1 div2"
                "div_bot div_bot";
            width: 100%;
            height: 100%;
            margin: 0;
        }

        body > nav{
            grid-area: nav;
            background-color: tan;
        }

        #div1{
            grid-area: div1;
            background-color: red;
        }

        #div2{
            grid-area: div2;
            background-color: blue;
        }

        #div_bot{
            grid-area: div_bot;
            background-color: green;
        }

    </style>
</head>
<body>

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Book summary</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact us</a></li>
            <li><a href="#">Purchase</a></li>
        </ul>
    </nav>

    <div id="div1">Div 1</div>

    <div id="div2">Div 2</div>

    <div id="div_bot">Bottom Div</div>

</body>
</html>
0 голосов
/ 27 мая 2020

Я предполагаю установить следующий открывающий тег <div> на: <div style="width=100%;">.

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

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

...