我正在构建一个简单的日历。我希望月份在屏幕上响应地换行，并且父容器保持其子容器的宽度和高度。例如，如果屏幕宽度为 950 像素，月份为 100x100，我将在一行中有 9 个月，在下一行中有 3 个月，父容器为 900 x 200。到目前为止，我只能设法获得 900 的维度x 0 父显示设置为“inline”或 910 x 200 父显示设置为“inline-block”。
我希望我已经解释清楚了吗？
在我的代码中它的值(value)...
编辑 为了澄清问题，我添加了蓝色背景。我想以一些响应代码结束，无论屏幕如何，最右边的子(月)div 的右侧都不会显示任何蓝色。
<html>
<head>
<style>
.cal {position:relative; display:inline-block; border:3px solid yellow; box-sizing:border-box; background-color:blue}
.month {float:left; width:250px; height:170px; border:3px solid red; background-color:white; box-sizing:border-box;}
</style>
</head>
<body>
<div class="cal">
<div class="month">Jan</div>
<div class="month">Feb</div>
<div class="month">Mar</div>
<div class="month">Apr</div>
<div class="month">May</div>
<div class="month">Jun</div>
<div class="month">Jul</div>
<div class="month">Aug</div>
<div class="month">Sep</div>
<div class="month">Oct</div>
<div class="month">Nov</div>
<div class="month">Dec</div>
</div>
</body>
</html>谢谢
最佳答案
因此，您希望父级在每次换行时再次收缩以适应子级的宽度。恐怕没有纯 CSS 方法可以做到这一点。
不是要更改您的规范，但我建议将父级宽度保持在 100%，并拉伸(stretch)/收缩子级以适合父级。当然，我不知道这是否适合您，或者 child 的宽度是否必须固定。如果可以的话，flexbox 或媒体查询是实现它的两种好方法。如果不是，您将不得不求助于 JavaScript。
这是一个使用媒体查询和 calc() 的例子:
.cal {
box-sizing: border-box;
position:relative;
display:inline-block;
min-width: 100%;
border:3px solid yellow;
}
.month {
box-sizing: border-box;
float:left;
width:calc(100% / 12);
height:170px;
border:3px solid red;
}
@media (max-width: 900px) { .month { width: calc(100% / 6); } }
@media (max-width: 600px) { .month { width: calc(100% / 4); } }
@media (max-width: 400px) { .month { width: calc(100% / 3); } }<div class="cal">
<div class="month">Jan</div>
<div class="month">Feb</div>
<div class="month">Mar</div>
<div class="month">Apr</div>
<div class="month">May</div>
<div class="month">Jun</div>
<div class="month">Jul</div>
<div class="month">Aug</div>
<div class="month">Sep</div>
<div class="month">Oct</div>
<div class="month">Nov</div>
<div class="month">Dec</div>
</div>JSFiddle .
如果您真的希望 .month 的宽度固定，这里有一些 javaScript 可以满足您的需求:
var calcWidth = function() {
var maxCalWidth = document.body.clientWidth - 9,
monthWidth = 77,
monthsPerRow = parseInt(maxCalWidth / monthWidth),
newWidth = monthsPerRow * monthWidth + 9;
document.querySelector('.cal').style.width = newWidth + 'px';
};
calcWidth();
window.onresize = calcWidth;
请注意，某些数字是硬编码的。你可能不想那样做，我只是在没有 jQuery 的情况下偷懒。这是 JSFiddle for that .
关于html - 将父 div 保持为包裹子元素的宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33974500/