div+css解决办法
日期：2014-05-17 浏览次数：20708 次
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 "> 最新留言 </title>
<div class= "content "> 留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容 </div>
</div>
<div class= "imgRight "> <img src= "http://zi.csdn.net/new.jpg "> </div>
</div>
</body>
</html>
想实现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 "> 最新留言 </title>
<div class= "content "> 留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容 </div>
</div>
<div class= "imgRight "> <img src= "http://zi.csdn.net/new.jpg "> </div>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
