UC知道请教初级CSS代码问题
来源：百度知道 编辑：UC知道 时间：2024/06/02 02:05:24
<div id="header">
<img src="logo1.gif" width="50" height="92" /><img src="logo2.gif" width="50" height="92" />
</div>
如上面代码所示，我在header中插了两张图片，高92像素。
我在.css文件里对header的高度定义为100像素：
#header {width:100px;height:100px}
即header比两张图片高，我想让两张图片显示在header的底部，因为默认是图片是显示在header的顶部的，我需要加一个什么代码？
<img src="logo1.gif" width="50" height="92" /><img src="logo2.gif" width="50" height="92" />
</div>
如上面代码所示，我在header中插了两张图片，高92像素。
我在.css文件里对header的高度定义为100像素：
#header {width:100px;height:100px}
即header比两张图片高，我想让两张图片显示在header的底部，因为默认是图片是显示在header的顶部的，我需要加一个什么代码？
目前浏览器还不能很好的支持DIV的垂直对齐属性,所以只能硬设了..
以下代码都可以完成你的要求:
1、 #header {width:100px;height:92px;padding-top:8px;}
2、 #header img{margin-top:8px}
3、 #header img{padding-top:8px}
一般来说可以这样，#header {width:100px;height:92px;padding-top:8px;}
给图片写个样式
img{
float:bottom;
}
一般的，要求样式和内容分离，所以将你img标签中的宽高设置移到了CSS中。下面是BODY的部分：
<div id="header">
<img src="" class="tupian1" />
<img src="" class="tupian2"/>
</div>
下面在CSS中有两种常用方法可以实现：
法一：通过给img加margin-top:8px;实现。这种方法通过增加img的占位来实现。比较简单。
div#header {
width:100px;
height:100px;
border:2px solid #333; /*方便查看，在这里加了边框*/
}
div#header img{
width:50px;
height:92px;
float:left; /*这里的浮动定位是必须的，否则，img标签自带2px的边距，必须将div宽设为108px，你可以试一下。*/
margin-top:8px;/*关键的上边距的设置。*/
}
法二：由于有时许多东西一起定位，设置了margin，增加了占位，会影响其他对象的定位显示，这里通过position属性对其