CSS - 将宽度除以父级的百分比答案

【问题标题】：CSS - Divide width to percentage of parentCSS - 将宽度除以父级的百分比
【发布时间】：2020-05-06 09:58:04
【问题描述】：

我给了我的 div 一个最小宽度。

但是如果宽度增加到更多，那么宽度应该是父容器的百分比。

我一辈子都想不通为什么我无法解决这个愚蠢的问题。

任何帮助将不胜感激。

在上面的小提琴中，您可以看到环绕的白色边框扩展了窗口的宽度，但我的 div 有自己的想法。

<html>
  <body>
    <div class = "wrap">
      <div class="date">Date</div>
      <div class="month">Month</div>
      <div class="task">Task</div>
      <div class="status">Status</div>
    </div>
  </body>
</html>

body {
  background-color: #4efa6d;
}

.wrap {
  width: 100%;
  border: 1px solid white;
}

.date {
  min-width: 60px;
  width: 6.25%;
  float: left;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

.month {
  min-width: 70px;
  width: 6.25%;
  float: left;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

.task {
  min-width: 540px;
  width: 67.5%;
  width: auto;
  float: left;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

.status {
  min-width: 100px;
  width: 12.50%;
  float: left;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

【问题讨论】：

所以你需要所有的 div 来适应 100% 的大小吗？
您没有考虑到边距和边框加起来超过剩余的 %
1) 所有百分比的总和低于 100%，但您需要考虑所有边距，并且您将 px 与 % 混合在一起 2) 任务元素的宽度为 @987654326 @。 3) 应在父容器上应用浮动清除
我确实计算了所有宽度以及边距。但是当它不起作用时，我捏造了数字，然后他们可能搞砸了。但是，是的。所有影响宽度的元素都被考虑在内。 @manjuboyz 的回答很到位。

标签： html css width parent

【解决方案1】：

您可以使用flex。（希望这不是问题）

float 现在已经过时了。

我已将px 移动到随机% 以供min-width 随意修改。

fiddle 玩游戏。

body {
  background-color: #4efa6d;
}

.wrap {
  width: 100%;
  border: 1px solid white;
  display:flex;
}

.date, .month {
  min-width: 2%;
  width: 6.25%; 
  border: 1px solid red;
  margin: 5px;
  padding:5px;
}

.task {
  min-width: 10%;
  width: 67.5%;
  margin: 5px;
 padding:5px; 
  border: 1px solid red;

}

.status {
  min-width: 5%;
  width: 12.5%;
  border: 1px solid red;
  margin: 5px;
  padding:5px;
}

<html>
  <body>
    <div class = "wrap">
      <div class="date">Date</div>
      <div class="month">Month</div>
      <div class="task">Task</div>
      <div class="status">Status</div>
    </div>
  </body>
</html>

【讨论】：