div包裝不擴展以容納css中的文本

-1

我有一些描述文本是段落的一部分，但包裝盒不調整大小以適應文本。我試過height:auto;，但它似乎沒有太多。div包裝不擴展以容納css中的文本

如果可能的話，請給我看一個有和沒有滾動條的例子。我的主要問題是我無法獲得灰色框來擴展。如果我有滾動條，我會希望他們在p.desc。

這裏是我的jsfiddle：http://jsfiddle.net/XxDFb/29/

HTML

<div class="team-wrapper"> 
    <div class="team-member-photo"> 
     <img alt="pic" src="http://placehold.it/134x108"> 
    </div> 
    <div class="team-member-social-network-links"> <a class="url" href="http://www.repeatpenguin.com" title="repeatpenguin.com" rel="me">Twitter</a>/<a class="url" href="http://www.repeatpenguin.com" title="repeatpenguin.com" rel="me">Facebook</a> 

    </div> 
    <div class="team-details"> 
     <p class="name">Firstname Surname</p> 
     <p class="job-title">Job title</p> 
     <p class="email">Email Address</p> 
     <p class="tel">112-123-1232</p> 
     <p class="desc"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis elementum neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non facilisis magna. Vestibulum mattis vitae lacus vitae hendrerit. Maecenas vel urna et quam egestas bibendum. Mauris aliquet tellus ante, sit amet malesuada urna tincidunt id. In dapibus erat vel metus aliquet rhoncus.</p><br /> 
<p> 
Integer pharetra nunc id dapibus posuere. Aliquam auctor, felis id euismod dignissim, nulla diam condimentum dui, sit amet aliquam quam elit vel nisi. Ut erat ligula, eleifend vel facilisis vel, viverra ut dui. Suspendisse lacinia massa sed porttitor lacinia. Nunc vitae eros convallis dui dapibus aliquet. Donec cursus est eu dolor pulvinar eleifend. Nunc at sem et lorem tempus tincidunt eu ac nunc. Praesent scelerisque libero vel pharetra porttitor.</p> 
     </p> 
    </div> 

</div>

CSS

div.team-wrapper { 
    background-color:#dedede; 
    padding:10px; 
    position:relative; 
    height:auto; 

} 
div.team-member-photo { 
    width:135px; 
    height:109px; 
    padding-top:20px; 
    padding-left:20px; 
} 
div.team-member-photo img { 
    background: none repeat scroll 0 0 #F1F1EF; 
    border: 1px solid #B2B4B2; 
    padding: 8px; 
} 
div.team-member-social-network-links { 
    width:135px; 
    height:109px; 
    padding-left:30px; 
    padding-top:20px; 
} 
div.team-details { 
    top: 7px; 
    left: 200px; 
    position: absolute; 
    border:1px solid RED; 
    width:560px; 
    margin-top:20px; 
    height:auto; 
} 
div.team-details p { 
    margin:0; 
    line-height:25px; 
} 
div.team-details p.name { 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); 
    color: #4F688E; 
    font-weight:700; 
    font-size:18px; 
    text-transform:uppercase; 
} 
div.team-details p.job-title { 
    color: #626362; 
    font-weight:400; 
    font-size:18px; 
    font:italic 16px/18px Georgia, Palatino, "Times New Roman", Times, serif; 
} 
div.team-details p.email { 
    text-shadow:0 1px 1px rgba(255, 255, 255, 0.8); 
    color: #626362; 
} 

div.team-details p.tel { 
    color: black; 
    font-weight:400; 
    font-size:18px; 
    font:16px/18px Georgia, Palatino, "Times New Roman", Times, serif; 
} 

div.team-details p.desc { 
    padding-top:40px; 
}

來源

2013-08-04 PriceCheaperton

我覺得這可能是一個可能重複[CSS - 位置絕對 - 容器高度問題（HTTP：//計算器的.com /問題/ 7321281/CSS-位置絕對容器高度的問題）。您的'.team-details' div上的'position：absolute'會導致此問題。 – Jeroen

它的具體到我的CSS ..有沒有一個愚蠢的。 – PriceCheaperton

@PriceCheaperton對不起，價格恐怕它被Jeroen提到的帖子所覆蓋。閱讀Steven Xu的部分。這裏有一個關於如何修復它的建議http://jsfiddle.net/XxDFb/33/ – RiggsFolly

它看起來像一個position: absolute問題給我。因爲.team-details是絕對的，所以父母不再控制它。我把this Fiddle放在一起。

我將.team-member-photo更改爲.team-member-photo-social，並將社交鏈接移至該處。接下來，我刪除了position: absolute以及附加到它的樣式。

從這裏兩個div可以是display: inline-block，以允許他們坐在旁邊，仍然有一些保證金，或float: left。父項中的浮動元素將導致高度問題，但我添加了類.cf（clearfix）以將父項的高度擴展到子項的末尾。

我與浮去，因爲某些瀏覽器（IE7及以下）將無法讀取inline-block

來源

2013-08-04 16:24:28 maxinacube

div包裝不擴展以容納css中的文本

回答

相關問題