HTML/CSS：子元素從父div中溢出。你如何讓div全部包含兒童內容？

-1

在this example中，您會看到包含的div具有紅色邊框。但是，您還會注意到子跨度重疊超過父div的邊緣。爲什麼是這樣以及如何固定以便包含div包含跨度的全部內容？HTML/CSS：子元素從父div中溢出。你如何讓div全部包含兒童內容？

來源

2011-05-30 trusktr

將line-height更改爲22px對於.entry-utility似乎有竅門。

演示：jsfiddle.net/7mnP3

來源

2011-05-30 06:40:33 Marcel

謝謝，但這意味着我必須有22px線高度，這是我不想要的。必須有一些方法來使其工作！ – trusktr 2011-05-30 06:48:36

@trusktr：...或者只是在同一個元素上進行排序的用戶「overflow：hidden」。 – Marcel 2011-05-30 06:51:24

不幸的是，這將隱藏子跨度的一些邊緣，所以這是行不通的。我認爲有一個解決方案，我只是不知道什麼！ – trusktr 2011-05-30 06:53:30

我想我已經分離出你指的是你的代碼位：

<div class="entry-utility"> 
    <span> 
    <h2><a href="#" title="##" rel="bookmark">New Design For Keep Skatin’ Bro</a></h2> 
    Posted in <a href="#" title=" " rel="category tag">Animation</a>, 
    <a href="#" title=" " rel="category tag">Photography</a>, 
    <a href="#" title=" " rel="category tag">Uncategorized</a>, 
    <a href="#" title=" " rel="category tag">Videography</a>, 
    <a href="#" title=" " rel="tag">Joe Pea</a>, 
    <a href="#" rel="tag">Raquel Pea</a>, 
    <a href="#" rel="tag">test</a> on <a href="#">May 27, 2011</a>. 
    </span>            
</div><!-- .entry-utility -->

這是無效HTML因爲你有一個h2嵌套一個（內聯）span跨度將不包含邊框和填充 - 但爲了顯示這實際上如何影響CSS顯示，如果您使.entry-utility span {display: block;}應該使紅色邊框包含就像你想的那樣..但是我想我寧願修補嵌套，因爲太多的強制定位也是如此。

雖然您製作了h2display: inline;因此它顯示爲一個內嵌元素，但您不能更改元素的性質，它仍然是塊級元素。

來源

2011-05-30 07:47:53 clairesuzy

感謝您的信息！我會去試驗它，看看我想出了什麼。 – trusktr 2011-06-07 01:45:30

我想通了。如果你好奇，請檢查我的答案。 – trusktr 2011-09-03 11:59:15

HTML/CSS：子元素從父div中溢出。你如何讓div全部包含兒童內容？

回答

相關問題