问题描述:
我写了段CSS,但是左边的和右边的是在同一行,但右边的跑下边一行了,请教了
CSS代码 ---------------------------------
#icon_left {
height: 72px
width: 60px
font-family: Verdana, Arial, Helvetica, sans-serif, "宋体"
font-size: 12px
font-weight: normal
text-align: center
line-height: 20px
float: left
}
#icon_middle {
height: 72px
width: 60px
font-family: Verdana, Arial, Helvetica, sans-serif, "宋体"
font-size: 12px
font-weight: normal
text-align: center
line-height: 20px
margin-right: auto
margin-left: auto
}
#icon_right {
height: 72px
width: 60px
font-family: Verdana, Arial, Helvetica, sans-serif, "宋体"
font-size: 12px
font-weight: normal
text-align: center
line-height: 20px
float: right
}
DIV代码 -----------------------------------
<div id="icon_left"><img src=images/icon1.gif /><br />
战略&秘籍</div>
<div id="icon_middle"><img src=images/icon1.gif /><br />
地图下载</div>
<div id="icon_right"><img src=images/icon1.gif /><br />
任务下载</div>
解析:
试验了很久没搞出来,估计是float这个属性在块的行分布的计算上存在BUG,你看看这篇文章:
sace/members/persons/lpj/blog/CSS%2CFloat%2C01/
其中有一段:
“如果居左的浮动被放置在其容器的左上脚,并且其后跟随一个同向的浮动,该浮动会被放置在容器右上脚,然后移动到左侧,边界延伸到第一个浮动的右侧时停止。”
“最后的一种行为让我们创建整行的floats,每个都被放置在前一个的右侧(或者左侧,如果使用{float:right}). 同样,当一行中没有足够的空间时,多出来的floats绕到下一行,非常像行内元素那样。这对于制作可点击的图像“简略图”非常方便,因为矩阵会自动调整到屏幕的尺寸,只是简单地在需要时进行回绕。”
似乎说明了你的要求无法实现的原因……
如果你坚持采用这样的页面布局,可以考虑用表格,用表格要快的多了……
哈,参考了这篇文章:
ziyihome/bbs/dispbbs?boardid=13&id=498&page=1
搞出来了,你得把处于中间的那个块在代码中放在最后面……
您好,要使下边框border左边有距离右边顶对齐,首先要在CSS中使用margin属性,margin属性可以让您控制元素的外边距,以便让元素与其他元素保持一定的距离。您可以使用margin-right属性来设置元素右边的边距,以便让元素与右边的元素保持一定的距离。例如,您可以使用以下代码来设置border左边的距离:border-left: 200px
margin-right: 200px
这样,border左边就会有200px的距离,而右边的元素也会有200px的距离
在td标签内部增加一个 align="left"或 align="right",td元素默认居左的,所以 align="left"可以省略不写。也可设定一个样式。.alignR{text-align:right}
居右:<td align="alignR"></td>