div没有扩大错误

Question

我发现这个错误，我的div没有扩展

顶部的线是div，它应该围绕图像和你可以看到的文字

继承人代码：

HTML

    <div class="team sizer">
        <img class="teamtitle" src="FullWeb/v_landingpage/Title.png"/>
        <div class="person1 pimage">
            <img src="FullWeb/v_landingpage/Team_Pic_Base.png"/>
            <p class="ptext">Person 1</p>
        </div>
        <div class="person2 pimage">
            <img src="FullWeb/v_landingpage/Team_Pic_Base.png"/>
            <p class="ptext">Person 2</p>
        </div>
        <div class="person3 pimage">
            <img src="FullWeb/v_landingpage/Team_Pic_Base.png"/>
            <p class="ptext">Person 3</p>
        </div>
        <div class="person4 pimage">
            <img src="FullWeb/v_landingpage/Team_Pic_Base.png"/>
            <p class="ptext">Person 4</p>
        </div>
        <p class="pagebottomtext" width="44.21052631578947%">Lorem ipsum</p
    </div>

的CSS：

.team{
  position:relative;
  margin-bottom:700px;
  border: 1px solid black;
}

.teamtitle{
  position:absolute;
  top:1%;
  left:47.15789473684211%;
  width:5.684210526315789%;
  height:42px;
  border: 1px solid black;
}

.pimage{
  position:absolute;
  top:120px;
  border: 1px solid black;
}
.person1{
  left:530px;
}

.person2{
  left:770px;
}

.person3{
  left:1010px;
 }

.person4{
  left:1250px;
}

.ptext{
  font-family: Lucida Sans Unicode;
  color:#999999;
  font-size:1.1em;
  border: 1px solid black;
}

.pagebottomtext{
  position:absolute;
  text-align:center;
  width:44.21052631578947%;
  top:320px;
  left:27.89473684210527%;
  font-family: Lucida Sans Unicode;
  color:#999999;
}

提前感谢您的帮助。

http://jsfiddle.net/UPsew/3/

Answer 1

这是因为div的所有子元素都有position: absolute，因此被从流中取出（即它们不占用包含div内的任何空格，因此它缩小到零高度。）

你需要使用别的东西来定位它们。我有一点玩耍，并利用边距找到了这个位置：

http://jsfiddle.net/UPsew/7/

虽然你可能需要弄乱数字。

Answer 2

尝试将overflow：hidden添加到“team”类中。

我不太确定是这种情况，特别是你的HTML不完整。如果这不起作用，请在jsfiddle上添加您的代码。