html - 我无法让我的 div 使用固定高度。做过广泛的测试

Question

根据讲师的说明，使用表格制作漂亮的内联布局并不是“良好的编码习惯”。因此，我转而使用 div，它对于任何基于 width 的问题都运行良好，但是:

我无法将高度设置为静态。我需要，以便将我的 div 内联。这是我为类(class)创建的网站的屏幕截图:(裁剪) https://i.imgur.com/wvaSFEz.png

当我使用表格进行布局时，我能够使“新闻”和“特色产品”保持一致，而使用 div 则不能。

这是我尝试过的； min-height with px or %, height with px or %, max-height with px or %, position: absolute, overflow: hidden, display: inline, display: inline-block, position: fixed, 全部取自Stack Overflow”答案”，以及这些的组合。

我还尝试创建一个空的(带有一个 <br /> 标签)100% 宽度的 div，它将位于前两个 div 的下方和后两个 div 的上方，但由于某种原因，这个 div 只是在我的导航下被丢弃bar 到主容器 div 的顶部，它似乎并不关心它在代码中相对于其他 div 的位置。

我使用的是 css 样式表，我使用的四个 div 包含在“容器”类的主 div 中。这是我的工作代码；

.container {
    /* border: 2px solid red; /* For seeing the margins */
    margin-top: 3%;
}

.leftspacewide {
    /* border: 2px solid red; /* For seeing the margins */
    max-width: 74%;
    width: 74%;
    float: left;
}

.rightspacethin {
    /* border: 2px solid red; /* For seeing the margins */
    max-width: 24%;
    width: 24%;
    float: right;
}

在我实际的 html 中，它是这样的:

<div class='container'>
    <div class='leftspacewide'>
        welcome content here
    </div>
    <div class='rightspacethin'>
        login form here
    </div>
    <div class='leftspacewide'>
        featured product content here
    </div>
    <div class='rightspacethin'>
        news content here
    </div>
</div>

我不明白为什么我读到的每个答案都不起作用。

Answer 1

用 flex 试试这个结构。它应该按预期工作。我添加了颜色来区分 4 个容器

 

.container {
    /* border: 2px solid red; /* For seeing the margins */
    width: 100%;
    margin-top: 3%;
}
.row {
  display: flex;
}
.leftspacewide {
  width: 74%;
}
.rightspacethin {
  width: 26%;
}

<div class='container'>
  <div class="row">
    <div class='leftspacewide' style='background-color: red;'>
        welcome content here welcome content here welcome content here welcome content here welcome content herewelcome content herewelcome content herewelcome content herewelcome content herewelcome content herewelcome content herewelcome content herewelcome content herewelcome content herewelcome content here
    </div>
    <div class='rightspacethin' style='background-color: yellow;'>
        login form here             login form here             login form here             login form here
    </div>
  </div>
  <div class="row">
    <div class='leftspacewide' style='background-color: blue;'>
        featured product content here             featured product content here             featured product content here             featured product content here             featured product content here
    </div>
    <div class='rightspacethin' style='background-color: green;'>
        news content here             news content here             news content here             news content here
    </div>
  </div>
</div>