两个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 {
  display: flex;              /* forces children to same row */
  padding-left: 15px;
  padding-right: 15px;
}
.left-menu {
  width: 50px;
  background-color: red;
}
.right-container {
  display: flex;              /* forces children to same row */
  flex: 1;                    /* consume remaining space on the row */
  background-color: blue;
}
.middle-view {
  width: 70%;
  background-color: blueviolet;
}
.right-view {
  width: 30%;
  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>

Answer 2

这是解决方案..

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;