html - 两个 div 顶部和底部

Question

div对齐方式一左下二上底最后一右当我做的时候不是这样的

看这张图

我想像那样将图像与 div 标签对齐，不幸的是当我对齐时它不是那样出现的，
我如何布局一个 div 标签内的所有图像>？

这是我的html代码

<div class="site_contents">
  <div class="header">
    <div class="big_logo"></div>
    <div class="work_nav"></div>
    <div class="testimonial"></div>
    <div class="cliants"></div>
    <div class="testimonial"></div>
    <div class="contact"></div>
  </div>
</div

这是我的CSS代码

.site_contents {
    height:auto;
    width: 900px;
    background-color: #666;
    margin:0 auto;
}
.header {
    background-color: #3CF;
    height: 262px;
    width:100%;
    clear:both;
    position:relative;
    border:2px solid #000;
}
.header div
{
    float: left;
}
.big_logo{
    background-color: #06C;
    height: 262px;
    width: 459px;
    background: url(images/sitetemplate_header.gif)  0 -21px;   
}
.work_nav {
    background-color: #F00;
    height: 159px;
    width: 170px;
}
.testimonial {
    background-color: #3F9;
    height: 104px;
    width: 170px;
}
.cliants {
    background-color: #09C;
    height: 262px;
    width: 171px;
}
.contact {
    background-color: #30C;
    height: 262px;
    width: 101px;
}

谁能帮帮我

Answer 1

这几乎就是您想要的。 http://jsfiddle.net/

您需要注意一些事情。

1. work_nav 和 testimonial 需要放在一个单独的 div 中，我已经包含了它 (container2 )

2. 需要调整总宽度。我也改变了它。你可以把玩它，根据你的需要制作它。

3. 我还添加了边框以识别每个框。您应该删除这些边框，并且必须从当前总宽度中减去边框占用的宽度。即再次调整当前宽度。