首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

div+css解决办法

2012-02-05 
div+css想实现chinaren首页的效果,控制最新留言居中,左和右都是图片,发现预览的时候图片排列很不规则,谢谢

div+css
想实现chinaren首页的效果,控制最新留言居中,左和右都是图片,发现预览的时候图片排列很不规则,谢谢大家了,
<DIV   class=news_tit> <SPAN   class=float_left> <IMG   src= "indeximage/minlogo.gif "> 最新留言 </SPAN>   <A  
href= "http://www.chinaz.com/Program//Index.html "> More... </A>
            <DIV   class=clear_float> <IMG   alt= " "  
src= "indeximage/space.gif "> </DIV>
    </DIV>

下面是css
.news_tit   {
PADDING-RIGHT:   10px;   PADDING-LEFT:   10px;   FONT-WEIGHT:   bold;   BACKGROUND:   #DCDCDF;   MARGIN-BOTTOM:   2px;   PADDING-BOTTOM:   0px;   COLOR:   #333333;   LINE-HEIGHT:   25px;   PADDING-TOP:   0px;   HEIGHT:   25px
}

[解决办法]
楼主的意思是中间是留言,两边是图片对吧?
左边的图片和留言区域都用float:left;
右边的图片可以用float:right;

<html>
<head>
<style>
body {margin:0 auto; text-align:center; font-size:12px;}
#news {width:720px; text-align:left;}
#news .imgLeft {width:160px; float:left;}
#news .newslist .title {
width:430px;
font-weight:bold;
background:#DCDCDF;
color:#333;
line-height:25px;
height:25px;
float:left;
}
#news .newslist .content {
width:430px;
background:#EEE;
color:#333;
font-weight:normal;
float:left;
padding:0 10px;
}
#news .imgRight {width:130px; float:right; text-align:right;}
</style>
</head>
<body>
<div id= "news ">
<div class= "imgLeft "> <img src= "http://www.csdn.net/ui/styles/public_header_footer/logo_csdn.gif "> </div>
<div class= "newslist ">
<div class= "title "> &nbsp;最新留言 </title>
<div class= "content "> 留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容 </div>
</div>
<div class= "imgRight "> <img src= "http://zi.csdn.net/new.jpg "> </div>
</div>
</body>
</html>

热点排行