连续2列，百分比宽度

Question

我在连续排列2列时遇到问题。 第1列宽2％，第2列宽98％。 我怎样才能让他们工作？ 我试过浮动：左;但这似乎不是一个合适的方法。

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

试试这个：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

inline-block将空格数作为内容计算，这就是为什么它没有设置为100％宽度。要设置这些元素，您可以使用以下方法

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

<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%;
  font-size: 0px;
}

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

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

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

Answer 3

使用display:flex您可以轻松实现此目的。在你的代码中有一个问题，所以我会建议你使用这种方法。同样word-break:break-all到调整2% div中的文字，因为它的宽度可能很小。

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

.moon {
  width: 2%;
  background: yellow;
  margin: 0;
  padding: 0;
  flex: 1;
  word-break: break-all
}

.sun {
  width: 98%;
  background: red;
  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>