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;
}
任何人都可以帮助我
答案 0 :(得分:1)
这几乎就是你想要的。 http://jsfiddle.net/
你需要注意许多事情。
work_nav
和testimonial
需要位于我已包含的div
container2
中
需要调整总宽度。我也改变了它。你可以根据自己的需要来玩它。
我也包含边框以识别每个框。您应该删除这些边框,并且必须从总当前宽度中减去边框占用的宽度。这意味着再次调整当前宽度。