Question

我有一个简单的HTML页面。我使用了div标签在顶部显示一个框。我创建了另一个名为section的div标签类。在本节div中，我想显示三个部分。因此，我在其中创建了三个div标签，并为其指定了唯一的类名称。在我创建的navs div中，我想显示一个标题。因此，我创建了一个div，并将其命名为nav-header。在标题下，我想显示有关标题的内容。因此，我在navs div中创建了另一个div标签，并给了一个类名navs-content。现在，当我在navs-content div中写一些内容时，该节中的三个div不在同一行中。如何在navs div标签中显示内容以及如何将三个div标签保持在同一行？

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Trying</title>
    <style>
    *{
      margin: 0;
      padding: 0;
    }
    .header{
      margin: 1%;
      background-color:#ffcdd2;
      height: 60px;
      border: 2px solid #d32f2f;
    }
    .navs{
      width: 23%;
      border: 2px solid #d32f2f;
      height: 300px;
      margin-left: 1%;
      display: inline-block;
      border-radius: 2px;
    }
    .news{
      width: 47.4%;
      border: 2px solid #d32f2f;
      height: 300px;
      margin-left: 1%;
      display: inline-block;
      border-radius: 2px;
    }
    .trends{
      width: 24%;
      border: 2px solid #d32f2f;
      height: 300px;
      margin-left: 1%;
      display: inline-block;
      border-radius: 2px;
    }
    .nav-header{
      width:100%;
      height: 40px;
      background: #ffcdd2;
    }
    .navs-content{
      background: blue;
      width: 100%;
    }
    </style>
  </head>
  <body>
    <div class="header">

    </div>
<div class="section">
<div class="navs">
  <div class="nav-header">
  <h1> this is a heading<h1>
  </div>

  <div class="navs-content">
asd
  </div>

</div>
<div class="news">
</div>

<div class="trends">

</div>


  </body>
</html>

这是我添加navs-content div时得到的输出

如何在不显示父div位置的情况下，在具有显示内联块属性的父div内添加子div？

0 个答案: