将父 div 保持为包裹子元素的宽度和高度答案

【问题标题】：Keeping parent div to width and height of wrapping children将父 div 保持为包裹子元素的宽度和高度
【发布时间】：2016-03-02 15:59:18
【问题描述】：

我正在构建一个简单的日历。我希望月份在屏幕上响应式包装，并且父容器保持其子容器的宽度和高度。例如，如果屏幕宽度为 950 像素，月份为 100x100，我将在一行中有 9 个月，在下一行有 3 个月，父容器为 900 x 200。到目前为止，我只能设法获得 900 的尺寸x 0，父显示设置为“inline”或 910 x 200，父显示设置为“inline-block”。

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

对于我的代码中的价值...

编辑为了澄清问题，我添加了蓝色背景。我想最终得到一些响应代码，无论屏幕如何，最右边的子（月）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>

谢谢

【问题讨论】：

您到底希望发生什么而没有发生？
我希望父 div 在子 div 周围创建一个框，右手最孩子和父母右边框之间没有任何空白空间。目前父母的宽度显示为 100% 无论如何。
@Jules 我设法使用 flexbox 来获得一个日历，它的父级 *shrinkwrapped 了内容。我假设您想要子 div 的固定尺寸，不幸的是，我认为没有可行的解决方法而不拉伸子 div 我只管理了所需宽度的一半的表格。:(

标签： html css

【解决方案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>

我们可以通过将所有子元素居中使它看起来更好一点，因为第一行的保留空间不能从父元素的宽度中扣除。

【讨论】：

不，这并不能解决它，恐怕父宽度仍在扩大到 100%
请看看我编辑的答案，这是我能找到的最佳解决方案。
感谢您的尝试，但仍然不是我想要的效果。我不确定我最初是否已经很好地解释了这个问题。我已经编辑了这个问题，希望能澄清一些事情。当然，也许这是不可能的。

【解决方案2】：

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%;
}

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

【讨论】：

【解决方案3】：

因此，您希望父项在每次包裹时再次缩小以适合子项的宽度。恐怕没有纯 CSS 方法可以做到这一点。

不要更改您的规格，但我建议将父级保持 100% 宽度，并拉伸/收缩子级以适应父级。当然，我不知道这是否适合您，或者孩子的宽度是否必须固定。如果它是一个选项，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.

如果您真的希望 .months 具有固定宽度，这里有一些 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。

【讨论】：