内联块超出父容器边界

Question

我在使用inline-block时遇到了一个问题，这会导致父元素的文本被打破。我知道这是一个简单的修复问题，但似乎我无法弄清楚如何让事情自然填充。

这就是它的样子

为了显示出盒子的位置和漂移，文本具有红色背景。下面是代码。

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

有什么想法可以解决这个问题吗？或者发生了什么事情？

- Brodie

---

a class 缺少闭合的双引号？ - calebds

这只是我发布时的语法错误，实际代码中没有语法错误。 - Brodie

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

}

- Vivek Chandra

---

我将接受这个答案，因为它有效，但是我发现在我的条目中使用更新的样式也可以正常工作。 - Brodie

我在原帖中更新了我的样式。最终我使用了overflow:hidden技术，使评论框可以沿着父元素的剩余宽度自动扩展。 - Brodie

Answer 2

尝试将您的评论框设置为position:relative

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

如果父元素已经设定了位置，那么定位元素的子元素会以父元素为边界。

- Drew Dahlman

---

啊！尝试在comment-box中添加position:relative。 - Drew Dahlman