-1

我有一些描述文本，它是段落的一部分，但包装框的大小没有调整以适应文本。我已经尝试过height:auto;，但它似乎没有多大作用。

如果可能的话，请给我看一个有和没有滚动条的例子。我的主要问题是我无法扩展灰色框。如果我有滚动条，我希望它们在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;
}
4

1 回答 1

1

这position: absolute对我来说确实是个问题。因为.team-details是绝对的，父母不再控制它。我把这个小提琴放在一起。

我更改.team-member-photo并.team-member-photo-social移动了社交链接以住在那里。接下来，我删除position: absolute了附加的样式。

从这里开始，这两个 div 可以是display: inline-block允许它们紧挨着每个 div 并且仍然有一些边距，或者float: left. 父级中的浮动元素会导致高度问题，但我添加了一个类.cf（clearfix）来将父级的高度扩展到子级的末尾。

我选择了浮动，因为某些浏览器（IE7 及以下）无法读取inline-block

于 2013-08-04T16:24:28.243 回答