我给了我的divs一个最小宽度。
但如果宽度增加到超过这个值，那么宽度应该是父容器的百分比。
我无法理解为什么我无法解决这个愚蠢的问题。
任何帮助将被感激。
在上图中，你可以看到wrap的白色边框扩展了窗口的宽度，但我的divs有自己的想法。
<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;
}
- 你可以使用
flex...(希望这不是问题)float到现在为止，已经成了老古董。- 我已经搬家了
px到随机%对于min-width请随意修改。
拨弄 来玩转。
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>当类的div的宽度为 wrap 达到 960px儿的宽度，其百分比等于多少？6.25% 达到 60px 等于 min-width 你设置的这个div，等于60，所以才会出现这种情况。