Keeping parent div to width and height of wrapping children

前端未结

关注

 3  743

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 t

相关标签:

3条回答

执念已碎

2021-01-26 02:38

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>

JSFiddle.

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.

0 讨论(0)

长发绾君心

2021-01-26 02:42

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>

0 讨论(0)

北恋

2021-01-26 02:52

Your code is almost perfect, just apply box-sizing:border-box; to .cal and .month elements. because border width is excluded from width without using border-box.

I think that's not possible with css, i could find a best possible solution for your answer in my following code

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

We can just make it a little better looking by centering all children, because the reserved space on first line couldn't be deducted from parent's width.

0 讨论(0)