连续 2 列，百分比宽度答案

【问题标题】：2 columns in a row, percentage width连续 2 列，百分比宽度
【发布时间】：2017-10-03 20:00:55
【问题描述】：

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

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

【问题讨论】：

标签： html css percentage

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：