突破父容器的內嵌塊

我遇到了內嵌塊突破父文本的問題。我相信這是一個快速解決方案，但我似乎無法弄清楚如何讓事情自然填補。突破父容器的內嵌塊

這是什麼樣子

enter image description here

文本具有紅色背景向您展示在該框，以及它是如何漂浮在它之外的約束。這是代碼的樣子。

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

就如何解決這一問題的任何想法？或發生了什麼？

來源

2012-02-06 Brodie

缺少'一個class'右雙引號？ – paislee 2012-02-06 18:12:25

這只是一個語法錯誤，當我發佈這個，在實際的代碼中沒有語法錯誤。 – Brodie 2012-02-06 18:15:38

改變這兩個類，以滿足您的需求 - ü需要設置寬度

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

}

來源

2012-02-06 18:24:04

我打算接受這個答案，因爲它的工作原理，但是我發現在我的輸入中使用更新後的樣式效果很好。 – Brodie 2012-02-06 18:31:03

@brodie更新了樣式?? ..好奇.. – 2012-02-06 18:32:31

我更新了我的原始文章中的樣式。我最終使用了overflow：hidden技術來允許註釋流動父級的剩餘寬度。 – Brodie 2012-02-07 18:50:20

試試您的評論框設置爲位置：相對

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

定位的元素孩子們會考慮他們的父母是邊界如果父定位。

來源

2012-02-06 18:11:31

仍然做同樣的事情 – Brodie 2012-02-06 18:14:59

啊！嘗試添加位置：相對於評論框 – 2012-02-06 18:19:14

突破父容器的內嵌塊

回答

相關問題