两个小的DIV同在一个大DIV内,为什么第二个DIV没有父级的边框?
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>最新动态排版</title>
<link rel="stylesheet" href="css/test_test_new.css">
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="new_center">
<div class="new_head">
最新动态
</div>
<div class="new_list">
<div class="new_list_one">
<div class="new_list_title">发表新贴<a href="javascript:void(0)">【主板信息披露业务备忘录第10号:重大资产组媒体说明会】</a></div>
<div class="new_list_time">
08-12 13:48
</div>
</div>
<div class="new_list_one">
<div class="new_list_title">发表新贴<a href="javascript:void(0)">【主板信息披露业务备忘录第10号:重大资产组媒体说明会】</a></div>
<div class="new_list_time">
08-12 13:48
</div>
</div>
<div class="new_list_one">
<div class="new_list_title">发表新贴<a href="javascript:void(0)">【主板信息披露业务备忘录第10号:重大资产组媒体说明会】</a></div>
<div class="new_list_time">
08-12 13:48
</div>
</div>
</div>
</div>
</body>
</html>
css部分
*{padding:0; margin: 0;}
body{
background: #f6f6f8;
font-size:16px;
font-family: "微软雅黑",'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.fl{float:left;}
.fr{float:right;}
li{ list-style-type: none;}
a{text-decoration: none; color:#333;}
a:hover{color:#235590;}
.hidden{display: none;}
.new_center{width:822px;background: #fff;height: auto;border:1px solid red; margin:30px;}
.new_head{font-size: 16px;padding:16px;border-bottom: 1px solid #e4e4e4;}
.new_list{width: 822px;}
.new_list_one{float: left;background: #fff;width: 100%; padding: 18px 0;border-bottom: 1px solid #e4e4e4;}
.new_list_title{font-size: 16px;width: 650px; overflow: hidden; float: left;text-indent: 50px;}
.new_list_time{float: right;font-size: 14px;color: #b7b7b7;margin-right: 20px;}
.new_list_title a{color:#3366cc;}
float
样式破坏队形了,尽量少用这玩意你的
<div class="new_list">
高度为0,相当于边框只包裹了一个最新动态
多使用其他标签,比如
span