Question

我正在构建一个简单的日历。我希望这几个月能够响应屏幕和父容器来保持其子节点的宽度和高度。例如，如果屏幕宽度为950px且月份为100x100，我在一行上有9个月，在下一行有3个月，父容器为900 x 200.到目前为止，我只能设法获得900 x 0，父显示设置为＆＃39; inline＆＃39;或者910 x 200，父显示设置为＆＃39;内联块＆＃39;。

我希望我已经解释好了吗？

在我的代码中，这是值得的......

修改为了澄清问题，我添加了蓝色背景。我想最终得到一些响应代码，无论屏幕是什么，都不会在最右边的孩子（月）div的右侧显示任何蓝色。

＆＃13;

<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>

＆＃13;

由于

Answer 1

您的代码几乎是完美的，只需将box-sizing:border-box;应用于.cal和.month元素即可。因为边框宽度不使用border-box从宽度中排除。

我认为使用css是不可能的，我可以在以下代码中为您的答案找到最佳解决方案

<html>
    <head>
      <style>

      .cal {position:relative; display:inline-block; border:1px solid yellow; text-align: center;}
      .month {float:none; margin:3px -2px; width:180px; height:170px; border:2px solid red; display: inline-block;} 
      </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>

我们可以通过居中所有孩子来使其更好看，因为第一行的预留空间无法从父母的宽度中扣除。

Answer 2

＆＃13;

html,
body {
  box-sizing: border-box;
  font: 400 16px/1.5'Palatino Linotype';
  height: 100vh;
  width: 100vw;
  overflow-x: auto;
  overflow-y: auto;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  background-color: #222;
  color: #EFE;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.shell {
  display: flex;
  position: relative;
  padding: 1.5em .75em;
  margin: 0 auto;
  height: 300%;
  width: 300%;
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content;
}
.content {
  position: absolute;
  font-variant: small-caps;
  left: 0;
}
.cal {
  display: flex;
  flex-flow: row wrap;
  outline: 3px solid yellow;
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
  max-width: 900px;
  flex: 3 0 90%;
}
.month {
  float: left;
  width: 250px;
  height: 170px;
  outline: 3px solid red;
  display: inline-block;
  flex: 1 1 50%;
}

＆＃13;

<html>

<head>

</head>

<body>
  <section class="shell">
    <div class="cal content">
      <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>
  </section>

</body>

</html>

＆＃13;

Answer 3

因此，您希望父级在每次子包装时再次缩小以适应子项的宽度。我担心没有纯粹的CSS方法可以做到这一点。

不要更改您的规格，但我建议将父母保持100％宽度，并拉伸/收缩孩子以适应父母。当然，我不知道这是否适合您，或者是否必须修复孩子的宽度。如果它是一个选项，flexbox或媒体查询是两个很好的方法来实现它。如果不是，那么您将不得不使用JavaScript。

以下是使用媒体查询和calc()的示例：

＆＃13;

.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); } }

＆＃13;

<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>

＆＃13;

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。

保持父div对包装儿童的宽度和高度

3 个答案: