Html 一行2列，宽度百分比

我在将两列排列成一行时遇到问题。 第一列的宽度为2%，第二列的宽度为98%。 我怎样才能让它们工作？ 我试过浮动：左；但这似乎不是一个正确的方法

代码笔：

月亮


太阳
月光{
宽度：100%；
}
月亮先生{
宽度：2%；
背景：黄色；
显示：内联块；
保证金：0；
填充：0；
}
孙先生{
宽度：98%；
背景：红色；
显示：内联块；
保证金：0；
填充：0；
}

试试这个：

.moonsun{
宽度：100%；
显示器：flex；
}
月亮先生{
宽度：2%；
背景：黄色；
显示：内联块；
保证金：0；
填充：0；
}
孙先生{
宽度：98%；
背景：红色；
显示：内联块；
保证金：0；
填充：0；
}

月亮


太阳

内联块

将空白作为内容计数，这就是为什么它没有设置为100%宽度。要设置这些元素，可以使用以下方法

.moonsun{
宽度：100%；
}
月亮先生{
宽度：2%；
背景：黄色；
显示：内联块；
保证金：0；
填充：0；
}
孙先生{
宽度：98%；
背景：红色；
显示：内联块；
保证金：0；
填充：0；
}

月亮

太阳

使用

display:flex

您可以轻松实现这一点。在您的代码中有一个问题，因此我建议您使用这种方法。另外

wordbreak:break all

to调整

2%div

中的文本，因为其宽度可能很小

.moonsun{
宽度：100%；
显示器：flex；
}
月亮先生{
宽度：2%；
背景：黄色；
保证金：0；
填充：0；
弹性：1；
单词break：打破所有
}
孙先生{
宽度：98%；
背景：红色；
保证金：0；
填充：0；
}

月亮


太阳

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