私は現在、自分の経験ではまだ構築していない構造を含む Web サイトを構築しています。これには、ラッパー内で複数のセクションを結合する必要があるレイアウトが含まれます。これを行うのはこれが初めてで、問題が発生しています。これを正しく行うようにしたいだけです。私が直面している主な問題は、div がこぼれてレイアウトが台無しになることです。
私の希望のレイアウト: http://oi40.tinypic.com/2vs403b.jpg
私がこれまでに得たもの: http://tinyurl.com/ognbkx2「接続しよう」の部分がオーバーフローし、レイアウトが台無しになっているのがわかります。
どうすればこれを修正できますか? あなたの助けは大歓迎です!!!!
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;
}