Html 如何获得divs a并排对齐整页？

我有两个div。我正在做一个网站设计，其中第一个部门举行了一些其他事情的导航。这将占用左侧20%的宽度和100%的高度。剩下的80%用于第二部分中的实际内容显示。我已经为此工作了几个小时，不管发生什么，我似乎都得不到它。有人能给我举个例子，让这个工作吗？我需要第一个和第二个div保持并排，但第一个div不会改变大小。而第二个是。非常感谢您的帮助。

HTML

<div class="wrapper">
    <div class="inner_left"></div>
    <div class="inner_right"></div>
</div>

---

如果我理解正确，你想让两个div的高度相等吗

如果是这样，那么您可以将主体用作

表格

，将两个div用作

表格单元格

，如下所示：

body,html { margin: 0; padding: 0; width: 100%; height: 100%; }
body {
    display: table;
}
#menu {
    display: table-cell;
    width: 20%;
    height: 100%;
    background: lightblue;
}
#content {
    display: table-cell;
    width: 80%;
    height: 100%;
    background: lightgreen;
}

---

嗨，你有两个div，你可以给他们id。 第一个是“导航”，第二个是“内容”

您的html：

<div id="nav"></div>

<div id="content"></div>

希望有帮助

<div class="container">
  <div class="header-info">

  </div>
  <div class="stang-1" id="stang-1">

  </div>
</div>


    <style>
.header-info {
  width: 20%;
  height: 50%;
  background: green;
  float:left;
}

.stang-1 {
  height:50%;
  background-color:red;
}

.标题信息{
宽度：20%；
身高：50%；
背景：绿色；
浮动：左；
}
stang-1先生{
身高：50%；
背景色：红色；
}

您不能将固定导航设置为某个百分比，并期望它保持该大小（没有Javascript），该百分比始终是窗口的百分比

编辑：使用媒体查询，您可以动态地将宽度更改为窗口大小，例如，如果窗口宽度超过800px，导航将从100px跳到200px，这可能会有所帮助

HTML:

---

请向我们展示您已经拥有的内容。粘贴您当前的代码，以便我们在使用表格进行布局时也可以尝试。表格用于表格内容。@Wavemaster，请在评论之前阅读。我不使用表，我使用div并赋予它们与表相同的属性。这没什么错，这是一个干净而好的解决方案。使用

将是错误的。顺便说一句，我宁愿使用这个解决方案，然后添加一个额外的（不必要的）包装div。在CSS中使用

div

作为表仍然使用表进行布局。只是有一个不同的标签。使用表格布局是不好的做法。使用表格布局是不好的做法，因为：你可以使用浮动、显示、填充、边距、变换、转换等来布局网站。但是，正如我提到的，表格是用于表格内容的。使用表格进行布局的冲动源于远古时代，那时我们没有更好的可能性。@Wavemaster:那么请向我解释为什么。。。

用于显示表格数据。

设计用于划分，就像网页的结构一样。使一个

div

像一个表一样工作，并不能使它成为一个表。只有几行CSS和HTML中的两个元素，问题就解决了。我真的看不到这里所谓的练习。。。

#nav{
   display:inline-block;
   width: 20%;
}

#content{
   display:inline-block;
   width: 79%;
}

<div class="container">
  <div class="header-info">

  </div>
  <div class="stang-1" id="stang-1">

  </div>
</div>


    <style>
.header-info {
  width: 20%;
  height: 50%;
  background: green;
  float:left;
}

.stang-1 {
  height:50%;
  background-color:red;
}

<div class="navigation">
    <ul>
        <li>First Point</li>
        <li>Second Point</li>
        <li>Third Point</li>
    </ul>
</div>
<div class="content">
    <p>Content</p>
</div>

.navigation{
    width: 100px;
    background-color: lightblue;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
.content{
    margin: 0 0 0 100px;
}
@media (min-width: 800px) {
    .navigation{
        width: 100px;
    }
    .content{
        margin: 0 0 0 100px;
    }
}