两个div顶部和底部

时间:2011-10-31 23:11:13

标签: html css

div对齐一个左边的两个顶部底部最后一个右边 当我正在做的时候,它就像那样

看到这张图片

http://i44.tinypic.com/10eejj8.jpg

我想将这样的图像与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;
}

任何人都可以帮助我

1 个答案:

答案 0 :(得分:1)

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

你需要注意许多事情。

  1. work_navtestimonial需要位于我已包含的div

  2. 单独的container2
  3. 需要调整总宽度。我也改变了它。你可以根据自己的需要来玩它。

  4. 我也包含边框以识别每个框。您应该删除这些边框,并且必须从总当前宽度中减去边框占用的宽度。这意味着再次调整当前宽度。