我目前正在构建一个网站，其中包含我尚未根据我的经验构建的结构。它涉及一种布局，需要在一个包装器中将多个部分连接在一起。这是我第一次这样做，我遇到了问题。我只是想确保我正确地做到了这一点。我遇到的主要问题是 div 溢出并弄乱了布局。
我想要的布局： http: //oi40.tinypic.com/2vs403b.jpg
到目前为止我得到了什么：http: //tinyurl.com/ognbkx2你可以看到“Lets Connect”部分溢出并弄乱了布局。
我怎样才能解决这个问题？非常感谢您的帮助！！！！
HTML
<div id="about-wrap">
<div class="portrait">
<img src="/andrew/images/andrew.jpg"></img>
<div class="about-me">
ABOUT ME<br>
<img src="/andrew/images/about-divide-1.jpg"></img>
<p>
Snipped
</p>
<div id="resource-wrap">
<div class="resume">
RESUME<br>
<img src="/andrew/images/about-divide-2.jpg"></img>
PDF | WORD
<div class="connect">
LETS CONNECT<br>
<img src="/andrew/images/about-divide-3.jpg"></img>
TWITTER | FACEBOOK | LINKEDIN
<div id="exp-thumb-wrap">
I'VE DONE WORK FOR
<img src="/andrew/images/about-divide-1.jpg"></img>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<span class="stretch"></span>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<span class="stretch"></span>
</div>
</div>
</div>
</div>
CSS
/*About Wrap*/
#about-wrap {
position: relative;
top: 440px;
margin-right: auto;
margin-left: auto;
width: 960px;
height: 440px;
background: #FFFFFF;
}
.about-me {
height: 160px;
width: 460px;
float: left;
margin-right: 20px;
}
/*Resources Wrap*/
#resource-wrap {
height: 60px;
width: 460px;
float: left;
}
.resume {
height: 60px;
width: 130px;
float: left;
margin-right: 10px;
}
.connect {
height: 60px;
width: 300px;
float: left;
}
/*Brand Experience Wrap*/
#exp-thumb-wrap {
height: 160px;
width: 460px;
float: left;
}
.exp-thumbs {
width: 104px;
height: 45px;
float: left;
margin-right: 10px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
/*Portrait*/
.portait {
width: 460px;
height: 408px;
margin-right: 0;
margin-left: 20px;
margin-top: 0;
margin-bottom: 0;
float: right;
}