html - 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

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

您需要使用其他东西来定位它们。我玩了一点游戏，并使用边距来定位：

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

尽管您可能需要弄乱数字。

Answer 2

尝试将溢出：隐藏添加到“团队”类。

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