css - 在此示例中，如何根据子尺寸调整父 div 的高度？

Question

我正在制作一个部分，列出我正在处理的网站上的用户评论。我遇到的问题是，当有人发布过长的评论时，div 不会调整大小以适合文本，因此文本要么溢出，要么在 div 的底部被截断。我希望我的问题可以更具体一些，但是我这里有很多嵌套的 div，我不知道应该编辑哪一个。 http://codepen.io/donnaloia/pen/MYKeOB

HTML

<BR>
<BR>
<BR>

<div class="maincontainer">
<div class="reviewrow">
<div class="commentpanel">
<div class="reviewerpic">
  <img src="mugshot.img"></div>

<div class="authordiv">
<strong>Reviewed by Dave</strong>
<div class="stars"><img src="/static/img/stars.png"> </div>

<hr>
<div class="reviewcomment">This is less a "pros and cons" review than a hopefully useful commentary about the Kindle compared with other eReaders and what it means for the eBook industry. (I believe that everything has changed with the Kindle's creation.)

For many years I have been an avid reader of eBooks using almost every eReading device on the market. So as an early-adopter of techie gadgets I had been anxiously awaiting Amazon's Kindle since its first rumors. So I immediately purchased it both out of curiosity and hoping for a better "next generation" eBook solution. In case you're wondering whether I'm "that" Steve Gibson, I probably am -- I'm the guy who gets Google's first three 
So, for what it's worth, if this posting is discovered by any truly interested pre-purchasers, I hope that the following commentary might place the Kindle in "perspective" and be of some value to you. (And if it is, I hope you'll click the button at the bottom to indicate that, so that this review might be found by more potential buyers ... Thank you!)</div>
</div>
</div>
</div>

<div class="reviewrow">
<div class="commentpanel">
<div class="reviewerpic">
  <img src="{{ i.author.get_profile.get_mugshot_url }}"></div>

<div class="authordiv">
<strong>Reviewed by Cindy</strong>
<div class="stars"><img src="/static/img/stars.png"> </div>

<hr>
<div class="reviewcomment">Hello.  This is a short review.</div>
</div>
</div>
</div>
</div>

CSS

.maincontainer {
  position:relative;
}
.reviewrow {
    width: auto;
    margin-left: 0.9375em;
    margin-right: 0.9375em;
    margin-top: 0;
    margin-bottom: 0;
}

.commentpanel{
  width:955px;
  height:115px;
  border-style: solid;
  border-width: 1px;
  border-color:#d8d8d8;
  background:#f2f2f2;
  padding:1.25rem;
  margin-bottom: 12px;
 }

.reviewerpic {
    position: relative;
    width: 90px;

}

.authordiv {
    position: relative;
    float: right;
    width: 796px;
    height: 30px;
    bottom:87px;
}

.stars {
    width:90px;
    top: 0px;
    left:260px;
    width: 70px;
    position: absolute;
}

.reviewcomment {
    font-size: 12px;
    font-weight:100;
}

在这里更容易看http://codepen.io/donnaloia/pen/MYKeOB

Answer 1

更改了一些样式以满足它...

.commentpanel{
    width:955px;
    /*height:115px;*/
    overflow: auto;/*added*/
    border-style: solid;
    border-width: 1px;
    border-color:#d8d8d8;
    background:#f2f2f2;
    padding:1.25rem;
    margin-bottom: 12px;
}

.authordiv {
    position: relative;
    float: right;
    width: 796px;
    /*  height: 30px;*/
    bottom:87px;
    top: 0px; /**added*/
}

查看 code pen