两个 div 并排位于另一个 div 内

Question

我有以下简单的 html 代码。

.body-content {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.left-menu {
    background-color: red;
    float: left;
    width: 50px;
}

.right-container {
    background-color: blue;
    width: 100%;
}

.middle-view {
    width: 70%;
    float: left;
    background-color: blueviolet;
}

.right-view {
    width: 30%;
    float: left;
    background-color: burlywood;
}

  <div class="body-content">
  <div class="left-menu">
    abc
  </div>
  <div class="right-container">
    <div class="middle-view">
      def
    </div>
    <div class="right-view">
      ghi
    </div>
  </div>
</div>

我得到以下结果：

但我想并排“def”和“ghi”。

我没有太多使用 HTML 和 CSS 的经验，但我认为中视图和右视图一起将填充右容器（70% + 30%）。但据我所知，左侧菜单的宽度（50px）对其有影响。

Answer 1

这是解决方案..

.body-content {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  float:left;
}

.left-menu {
    background-color: red;
    float: left;
    width: 50px;
}

.right-container {
    background-color: blue;
    width:calc(100% - 50px);
  float:left;
}

.middle-view {
    width: 70%;
    float: left;
    background-color: blueviolet;
}

.right-view {
    width: 30%;
    float: left;
    background-color: burlywood;
}

<div class="body-content">
  <div class="left-menu">
    abc
  </div>
  <div class="right-container">
    <div class="middle-view">
      def
    </div>
    <div class="right-view">
      ghi
    </div>
  </div>
</div>