인라인 블록이 부모 컨테이너를 벗어나는 경우

Question

인라인 블록이 부모 W/텍스트를 벗어나는 문제가 있습니다. 나는 그것이 빠른 수정이라고 확신하지만, 자연스럽게 채워지는 방법을 알아낼 수는 없다. 이 텍스트 상자가 어디 있는지를 보여주는 빨간색 배경을 가지고 있으며, 그것의 방법이 떠 외부는 제약 조건의

처럼 보이는 것입니다

. 코드는 다음과 같습니다.

<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

시도 : 상대

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

위치하여 요소의 아이들이 부모가 위치하는 경우 경계로 부모를 고려할 것입니다.