新闻列表 平均布局

如何在css上定义样式不需要程序员通过判断增加特殊类来实现平均布局？

实现下面效果：

已知条件：
 
程序代码：
echo "<ul>";
foreach(...){
      echo "<li><a href='".$val.url."'>".$val.title."</a></li>";
}
echo "</ul>";

　　

 
第一种方法：利用负边距。

在盒子模型中margin是算到实际宽度中。
且浮动元素有足够宽度才能与上一个元素并排。
 
第二种方法：绝对定位
 
缺点是外部包裹div需设定高度，对新闻列表还方便但不利于页面布局。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻列表</title>
<style type="text/css">
*{margin:0;padding:0}
ul{list-style-position:inside}
a{text-decoration:none}
body{font:12px/150% "Trebuchet MS", Arial, Helvetica, sans-serif}
/*--负边距实现法--*/
.news_list{margin:20px auto;width:520px;border:1px solid #ababab;background:#f9f9f9;overflow:hidden}
.news_list ul{display:inline-block;margin-right:-20px}
.news_list li{float:left;width:250px; margin-right:20px;background:#fcc}
.news_list2{margin:20px auto;width:790px;border:1px solid #ababab;background:#f9f9f9;overflow:hidden}
.news_list2 ul{display:inline-block;margin-right:-20px}
.news_list2 li{float:left;width:250px; margin-right:20px;background:#fcc}
/*--绝对定位法--*/
.news_list3{margin:20px auto;width:790px;height:100px;border:1px solid #ababab;background:#f9f9f9;overflow:hidden; position:relative}
.news_list3 ul{display:inline-block; position:absolute;width:810px}
.news_list3 li{float:left;width:250px;margin-right:20px;background:#fcc}
/*--伪类--*/
li:odd{margin-right:20px}
</style>
<script type="text/javascript">
//javascript 遍历判断法
/*--jquery 选择器设置css
*---$("li:odd").css({"margin-right":"20px"}); 两列
*---$("li:nth-child(2n+1)").css({"margin":"0px 20px"}); 三列 只要中间列 n=0
--*/
</script>
</head>
<body>
<div class="news_list">
	<ul>
    	<li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
    </ul>
</div>
<div class="news_list2">
	<ul>
    	<li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
    </ul>
</div>
<div class="news_list3">
	<ul>
    	<li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <!--foreach{-->
            <li><a href="#">adobe dreamweaver mxp</a></li>
        <!--}-->
    </ul>
</div>
</body>
</html>

　　

posted @ 2011-12-21 00:32  Tomi-Eric's  阅读(270)  评论(0)  编辑  收藏  举报