-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;
}
我觉得这可能是一个可能重复[CSS - 位置绝对 - 容器高度问题（HTTP：//计算器的.com /问题/ 7321281/CSS-位置绝对容器高度的问题）。您的'.team-details' div上的'position：absolute'会导致此问题。 – Jeroen
它的具体到我的CSS ..有没有一个愚蠢的。 – PriceCheaperton
@PriceCheaperton对不起，价格恐怕它被Jeroen提到的帖子所覆盖。阅读Steven Xu的部分。这里有一个关于如何修复它的建议http://jsfiddle.net/XxDFb/33/ – RiggsFolly