Question

我有一些描述文本是段落的一部分，但包装盒的大小不会调整以容纳文本。我试过了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;
}

Answer 1

对我来说，它看起来像position: absolute问题。因为.team-details是绝对的，所以父母不再控制它。我把this Fiddle放在一起。

我将.team-member-photo更改为.team-member-photo-social并将社交链接移至那里。接下来，我删除了position: absolute以及附加到它的样式。

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

我使用浮动因为某些浏览器（IE7及以下版本）不会读取inline-block

div包装器不会扩展以适应css中的文本

1 个答案: