div+css怎么设置让5张图片均匀排列在一行?

html-css012

div+css怎么设置让5张图片均匀排列在一行?,第1张

css部分如下:

img{width:184pxheight:140pxfloat:leftmargin-right:10px}

.m0{margin-right:0}

html部分如下:

<img src="" />

<img src="" />

<img src="" />

<img src="" />

<img src="" class="m0" />

说明:

图片宽度 184×5=920

剩余间距 960-920=40

5张图4个间距,每个 40÷4=10

样式中img将5张图均设置右边距(margin-right)10px,总间距10×5=50

总间距超出剩余间距10,故单独在第5张图上加样式margin-right:0清除右间距

欲想效果出现

:)

你在 head css里面再加一条

div{float:left}就行了

譬如

<style type="text/css">

div{float:left}

body {

font-family: "Times New Roman", "宋体", arial

font-size: 12px

margin:0 auto

text-align: center

background-image: url(../../images/background_top_0.png)

}

。。。。。。。。。。。。。。。。。。

我帮你写了个

<style type="text/css">

<!--

#all {

width:900px

margin:0 auto

}

#head {

height:300px

background-color:#0CF

position:relative

}

#head .menu {

height:35px

background-color:#069

color:#FFF

width:870px

position:absolute

top:250px

left:15px

}

#content {

margin:10px 0

height:300px

}

#content .left {

width:445px

height:300px

background-color:#F90

float:left

}

#content .right {

width:445px

height:300px

margin-left:10px

background-color:#FC0

float:left

}

#foot {

clear:both

height:80px

background-color:#999

}

-->

</style>

<div id="all">

<div id="head">

<div class="menu">这里是菜单</div>

</div>

<div id="content">

<div class="left">这里是左边</div>

<div class="right">这里是右边</div>

</div>

<div id="foot">这里是底部</div>

</div>

这样布局有利于SEO优化,页面代码简洁,用TABLE做的话,页面代码起码比CSS多几倍