CSS

Question

我已经为我的 div 设置了最小宽度。

但是如果宽度增加到超过这个宽度，那么宽度应该是父容器的百分比。

我这辈子都想不通为什么我无法修复这个愚蠢的东西。

我们将不胜感激。

在上面的 fiddle 中，您可以看到环绕的白色边框扩展了 window 的宽度，但我的 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;
}

Answer 1

You can do using flex.(hope this is not an issue)

float has become old as of now.

I have moved px to random % for min-width feel free to modify this.

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>

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

CSS - Divide width to percentage of parent

html

width

parent