html - 两个 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 的经验，但我认为中间 View 和右 View 一起将填充右容器 (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>