保持父div的宽度和高度包装儿童 [英] Keeping parent div to width and height of wrapping children
问题描述
我正在建立一个简单的日历。我想要几个月在屏幕上作出回应，而父容器保持其子女的宽度和高度。例如，如果屏幕宽度为950像素，月份为100x100，那么我将在一行中有9个月，下一个为三个，父容器为900 x 200.到目前为止，我只能设置尺寸为900 x 0，父显示设置为'inline'或910 x 200，父显示设置为'inline-block'。
我希望我已经解释了那个好吗？
在我的代码中，这是值得的...
编辑
为了澄清问题，我添加了蓝色背景。我想最终得到一些响应式代码，无论屏幕如何，都不会在最右边的子（div）右侧显示任何蓝色。
< html> < HEAD> <风格> .cal {position：relative;显示：内联块;边框：3px纯黄色;箱尺寸：边界盒; background-color：blue} .month {float：left;宽度：250像素;高度：170像素;边框：3px纯红色;背景颜色：白色; box-sizing：border-box;}< / style> < /头> <身体GT; < 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> < /体> < / html>
谢谢
因此，你希望父母再次收缩以适应孩子每次换行时的宽度。恐怕没有纯粹的CSS方式来做到这一点。不要改变你的规范，但我建议保持父宽度为100％，并拉伸/缩小孩子以适应父母。当然，我不知道这对你来说是一种选择，还是必须修正孩子的宽度。如果它是一个选项，flexbox或媒体查询是解决这个问题的两个好方法。如果不是，则必须使用JavaScript。
以下是使用媒体查询的示例， calc（） $ b
.cal {box-sizing：border-box;位置：相对;显示：内联块;最小宽度：100％; border：3px solid yellow;}。month {box-sizing：border-box;向左飘浮;宽度：计算（100％/ 12）;高度：170像素; 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类= 月 > DEC或LT; / DIV>< / DIV>
JSFiddle 。
如果你真的希望 .month s是一个固定宽度，下面是一些可以做你想要的javaScript：
变种calcWidth =函数（）{
变种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 。
I am building a simple calendar. I am wanting the months to wrap responsively on screen, and the parent container to keep the width and height of its children. For example, if the screen is 950px wide and the months 100x100, I'd have 9 months on one line and three on the next, with the parent container being 900 x 200. So far I can only manage to get dimension of either 900 x 0 with the parent display set to 'inline' or 910 x 200 with the parent display set to 'inline-block'.
I hope I have explained that OK?
For what it is worth here in my code...
EDIT In an attempt to clarify the problem I have added a blue background. I would like to end up with some responsive code that, regardless of the screen with, will not show any blue to the right of the right-most child (month) 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>
Thanks
So you want the parent to shrink again to fit the width of the children each time a child wraps. I'm afraid there is no pure CSS way to do that.
Not to change your spec, but I'd suggest keeping the parent at 100% width, and stretching/shrinking the children to fit the parent. I, of course, don't know if that's an option for you, or if the width of the children must be fixed. If it is an option, flexbox or media queries are two good ways to go about it. If it isn't, you'll have to resort to JavaScript.
Here's an example using media queries and 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>
If you're really wanting the .months to be a fixed width, here's a bit of javaScript that'll do what you want:
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;
NOTE that some numbers are hard-coded. You probably don't want to do that, I was just being lazy without jQuery. Here's the JSFiddle for that.
这篇关于保持父div的宽度和高度包装儿童的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
