内联块突破父容器

Question

我遇到了内联块突破父文件/文本的问题。我确信这是一个快速修复，但我似乎无法弄清楚如何让事情自然地填补。

这就是它的样子

文本有一个红色背景，以显示框的位置以及它是如何浮动在其约束之外的。这是代码的样子。

<div class="comment-box">
  <a class="comment-owner-link"><img src="user-img" /></a>
  <div class="comment">comment info goes here</div>
</div>

并且css非常直接

.comment-box {
  display: block;
  margin: 8px 8px 0 8px;
  white-space: nowrap;
}

.comment-owner-link {
  display: block;
  float: left;
  position: relative;
  width: 27px;
  height: 27px;
}

.comment-owner-link img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.comment {
  display: block;
  overflow: hidden;
  margin: 0 0 0 5px;
  word-break: break-all;
  white-space: normal;
}

关于如何解决此问题的任何想法？或者发生了什么事？

Answer 1

更改了这两个类以满足您的需求 - 您需要设置宽度

.comment-box {
display: block;
margin: 8px 8px 0 8px;
white-space: nowrap;
width:100px; /* add which ever width your application/comment-box needs here */
}
.comment-owner-link {
display: inline-block;
 vertical-align: top;
position: relative; 
width: 27px;
height: 27px;
width:10px; /* try to give the width necessary -- all should add up to 100 or which
 ever you've given fot comment-box */
}

.comment-owner-link img {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
 width:30px;
}
.comment {
display: inline-block;
vertical-align: top;
 margin: 0 0 0 5px;
width:60px; /*width for pict - 30px and the comment,say 60px,i.e. 100 - (10 + 30)*/
word-break: break-all;
white-space: normal;
overflow:hidden; /* this is gonna
 make sure it doesnt fall out of the specified space */

}

Answer 2

尝试将评论框设置为position：relative

.comment-box {
  display: block;
  margin: 8px 8px 0 8px;
  white-space: nowrap;
  position:relative;
}

定位元素如果定位父元素，子元素将认为它们的父元素是边界。