html - 连续 2 列，百分比宽度

Question

我在将 2 列排列成一行时遇到问题。第一列宽度为 2%，第二列宽度为 98%。我怎样才能让他们工作？我试过 float:left;但这似乎不是一个合适的方法。

代码笔:https://codepen.io/rae0724/pen/gWGvxG

<div class="moonsun">
  <div class="moon">Moon<br><br></div>
  <div class="sun">Sun<br><br><br><br><br><br></div>
</div>

.moonsun {
  width: 100%;
}

.moon {
  width: 2%;
  background: yellow;
  display:inline-block;
  margin:0;
  padding:0;
}

.sun {
  width: 98%;
  background: red;
  display:inline-block;
  margin:0;
  padding:0;
}

Answer 1

试试这个:

.moonsun {
  width: 100%;
  display: flex;
}

.moon {
  width: 2%;
  background: yellow;
  display:inline-block;
  margin:0;
  padding:0;
}

.sun {
  width: 98%;
  background: red;
  display:inline-block;
  margin:0;
  padding:0;
}

<div class="moonsun">
  <div class="moon">Moon<br><br></div>
  <div class="sun">Sun<br><br><br><br><br><br></div>
</div>