html - 如何将百分比宽度分配给 div？

Question

我有主 div，里面有 3 个 div，每个都有各自的百分比宽度。所以我分别得到了 20%、80% 和 100% 的 div。到目前为止与他们合作我意识到，如果我已经给出了 200% 的宽度，那么它将浏览器宽度分成两个相等的部分，前半部分被认为是 100%，另一半被认为是 100%。然后剩下的百分比分布发生。我是 CSS 的新手，但想说清楚。我的理解是否正确，这就是我的代码正常工作的原因？这样做有什么坏处吗？

.main {
  font-size: larger;
  font-weight: bold;
}

.column1 {
  position: relative;
  line-height: 30px;
  width: 20%;
  text-align: left;
}

.column2 {
  width: 80%;
}

.column3 {
  position: relative;
  width: 100%;
  float: right;
  text-align: right;
}

.clear-both {
  clear: both;
}

.row {
  border-width: 2px;
  border-bottom-color: #f4f4f4;
  border-style: none;
  position: relative;
  line-height: 30px;
  border-bottom-style: solid;
  margin-top: 0.2%;
  font-weight: normal;
  font-size: 12px;
  display: flex;
}

<div class="row main">

  <div class="column1">CODE</div>

  <div class="column2 ">NAME</div>
  <div class="column3">TOTAL</div>
</div>

Answer 1

如果你使用 flexbox，它会让你更清楚，而不是将 float 与 position 混合使用，

body {
  margin: 0
}

.main {
  font-size: larger;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
}

.column1 {
  flex: 0 20%;
  background: red
}

.column2 {
  flex: 0 80%;
  background: green
}

.column3 {
  flex: 0 100%;
  background: yellow
}

<div class="main">
  <div class="column1">CODE</div>
  <div class="column2 ">NAME</div>
  <div class="column3">TOTAL</div>
</div>

编辑 OP的评论

I want these 3 columns to be in one row. Working with my code too but total width of main div is 200%. is there any possibility of breaking of ui if i do it in this way

你可以这样做:

body {
  margin: 0
}

.main {
  font-size: larger;
  font-weight: bold;
  display: flex
}

.column1,
.column3 {
  flex: 0 20%;
  background: yellow
}

.column2 {
  flex: 1;
  background: green
}

<div class="main">
  <div class="column1">CODE</div>
  <div class="column2 ">NAME</div>
  <div class="column3">TOTAL</div>
</div>