CSS Отображение сетки: разница при добавлении или удалении тегов div - PullRequest
0 голосов
/ 22 апреля 2020

Извините за длинный код. Я просто хотел спросить, почему эти коды показывают мне другую веб-страницу.

Правая граница первого из них расширена до конца.

<!DOCTYPE HTML>

<html>
  <head>
    <title>WEB1 - HTML</title>
    <meta charset="UTF-8">
    <style>
      a {
        color: black;
        text-decoration: none;
      }
      .visited {
        color: gray;
      }
      #active{
        color: red;
      }
      h1 {
        font-size: 45px;
        text-align: center;
        border-bottom: 1px solid gray;
        margin: 0px;
        padding: 20px;
      }
      ol {
        border-right: 1px solid gray;
        width: 100px;
        margin: 0px;
        padding: 20px;
      }
      body {
        margin: 0px;
      }
      #grid {
        display: grid;
        grid-template-columns: 150px 1fr;
      }
    </style>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <div id="grid">
      <ol>
        <li><a href="1.html" class="visited" id="active">HTML</a></li>
        <li><a href="2.html" class="visited">CSS</a></li>
        <li><a href="3.html">Javascript</a></li>
      </ol>
      <div>
        <h2>What is HTML?</h2>
        <p>
          <a href="https://www.w3.org/html5/" target="_blank" title="HTML5 Information">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
        </p>

        <p style = "margin-top:45px;">
          HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
        </p>
      </div>
    </div>
  </body>
</html>

Однако, когда я добавляю теги div вне тегов ol , строка становится короче. (под тегом начала тела)

<!DOCTYPE HTML>

<html>
  <head>
    <title>WEB1 - HTML</title>
    <meta charset="UTF-8">
    <style>
      a {
        color: black;
        text-decoration: none;
      }
      .visited {
        color: gray;
      }
      #active{
        color: red;
      }
      h1 {
        font-size: 45px;
        text-align: center;
        border-bottom: 1px solid gray;
        margin: 0px;
        padding: 20px;
      }
      ol {
        border-right: 1px solid gray;
        width: 100px;
        margin: 0px;
        padding: 20px;
      }
      body {
        margin: 0px;
      }
      #grid {
        display: grid;
        grid-template-columns: 150px 1fr;
      }
    </style>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <div id="grid">
      <div>
        <ol>
         <li><a href="1.html" class="visited" id="active">HTML</a></li>
         <li><a href="2.html" class="visited">CSS</a></li>
         <li><a href="3.html">Javascript</a></li>
       </ol>
      </div>
      <div>
        <h2>What is HTML?</h2>
        <p>
          <a href="https://www.w3.org/html5/" target="_blank" title="HTML5 Information">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
        </p>

        <p style = "margin-top:45px;">
          HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
        </p>
      </div>
    </div>
  </body>
</html>

Я хочу знать, почему это происходит. Какова важность удаления тегов div?

1 Ответ

0 голосов
/ 22 апреля 2020

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

Вы можете добавить height:100%, чтобы избежать этого:

a {
  color: black;
  text-decoration: none;
}

.visited {
  color: gray;
}

#active {
  color: red;
}

h1 {
  font-size: 45px;
  text-align: center;
  border-bottom: 1px solid gray;
  margin: 0px;
  padding: 20px;
}

ol {
  border-right: 1px solid gray;
  width: 100px;
  margin: 0px;
  padding: 20px; 
  height:100%; /* added */
}

body {
  margin: 0px;
}

#grid {
  display: grid;
  grid-template-columns: 150px 1fr;
}
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
  <div>
    <ol>
      <li><a href="1.html" class="visited" id="active">HTML</a></li>
      <li><a href="2.html" class="visited">CSS</a></li>
      <li><a href="3.html">Javascript</a></li>
    </ol>
  </div>
  <div>
    <h2>What is HTML?</h2>
    <p>
      <a href="https://www.w3.org/html5/" target="_blank" title="HTML5 Information">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents
      from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
    </p>

    <p style="margin-top:45px;">
      HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics
      for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
    </p>
  </div>
</div>

И если вы возьмете свой первый код и измените выравнивание, вы получите тот же результат, что и ваш второй код:

a {
  color: black;
  text-decoration: none;
}

.visited {
  color: gray;
}

#active {
  color: red;
}

h1 {
  font-size: 45px;
  text-align: center;
  border-bottom: 1px solid gray;
  margin: 0px;
  padding: 20px;
}

ol {
  border-right: 1px solid gray;
  width: 100px;
  margin: 0px;
  padding: 20px;
  align-self:start; /* added */
}

body {
  margin: 0px;
}

#grid {
  display: grid;
  grid-template-columns: 150px 1fr;
}
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
    <ol>
      <li><a href="1.html" class="visited" id="active">HTML</a></li>
      <li><a href="2.html" class="visited">CSS</a></li>
      <li><a href="3.html">Javascript</a></li>
    </ol>
  <div>
    <h2>What is HTML?</h2>
    <p>
      <a href="https://www.w3.org/html5/" target="_blank" title="HTML5 Information">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents
      from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
    </p>

    <p style="margin-top:45px;">
      HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics
      for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
    </p>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...