Question

我目前正在建立一个网站，其中包含我尚未根据自己的经验构建的结构。它涉及一种布局，需要在包装器中将多个部分连接在一起。这是我第一次这样做＆amp;我遇到了问题。我只是想确保我正确地做到这一点。我遇到的主要问题是div溢出＆amp;搞乱了布局。

我想要的布局： http://oi40.tinypic.com/2vs403b.jpg

到目前为止我已经得到了什么： http://tinyurl.com/ognbkx2您可以看到“Lets Connect”部分溢出＆amp;搞乱了布局。

我该如何解决这个问题？非常感谢您的帮助!!!!

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;

}

Answer 1

它实际上并没有溢出它是因为你将div包含在彼此内部而不是直接将它们放在unser resource-wrap中。看看这是否是您正在寻找的。

HTML

<div id="resource-wrap">
<div class="resume"> 
RESUME<br>
<img src="/andrew/images/about-divide-2.jpg">
PDF | WORD


</div>
<div class="connect">
LETS CONNECT<br>
<img src="/andrew/images/about-divide-3.jpg">
TWITTER | FACEBOOK | LINKEDIN



</div>
<div id="exp-thumb-wrap">
I'VE DONE WORK FOR
<img src="/andrew/images/about-divide-1.jpg">

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

的CSS

.connect {
height: 60px;
width: 300px;
float: right;
}

Answer 2

很多代码都是错误的，打开firefox，右键单击页面并单击“查看页面源代码”，所有红色文本都是错误代码，你在head标签之外有一个元标记。你打开头然后关上它，然后再关闭它，留下一个迷路/头标记。

你的/ div标签没有关闭任何东西。很难看出哪些标签与什么标签匹配，因为它们没有正确缩进。

你有两个doctypes，两个head和两个body。每页应该只有一个。

img标签不以/ img结尾它们只是img href =“”/（注意“/”）

我怀疑一旦你解决了这些问题，你的问题可能就会消失。它是一个好的开始，一旦你修复它们更新网站，看看它是否正常工作。

〜A

在一个包装器内定位Div - 溢出

2 个答案:

HTML

的CSS