来源：http://itssh.cn/post/897.html
效果：
201606281467075734915244.jpg
方案思路：使用伪元素实现圆点，内容区域div默认最小高度，内容增高自动撑开。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公告效果</title>
<style type="text/css">
* {
font-size:14px;
margin:0px;
padding:0px;
font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica;
}
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*
*/
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*内容总区域的长度，自行控制*/
.timeline-block {
width:90%;
margin:0 auto;
}
/*title区域*/
.timeline-title-info {
display:-webkit-box;
display:-moz-box;
display:-0-box;
display:-ms-box;
display:box;
}
/*公告文字*/
.timeline-title {
color:#F67236;
margin-right:16px;
}
/*日期*/
.timeline-time {
-webkit-box-flex:1;
box-flex:1;
}
/*内容区域*/
.timeline-info {
width:100%;
}
/*内容文字*/
.timeline-content {
border-left:1px solid #FBC0A6;
margin-left:10px;
padding-left:34px;
margin-top:10px;
margin-bottom:8px;
color:#999999;
font-size:12px;
position:relative;
min-height:66px;
}
.timeline-content::before {
content:'';
display:block;
position:absolute;
left:-3px;
top:-3px;
width:5px;
height:5px;
border-radius:50%;
background:#F6763D;
}
.timeline-content::after {
content:'';
display:block;
position:absolute;
left:-3px;
bottom:0px;
width:5px;
height:5px;
border-radius:50%;
background:#F6763D;
}
</style>
</head>
<body>
<br>
<br>
<br>
<!--公告模块-->
<section>
<!--公告区域1-->
<div class="timeline-block">
<!--标题-->
<div class="timeline-title-info">
<div class="timeline-title">公告</div><div class="timeline-time">2015-11-02</div>
</div>
<!--内容-->
<div class="timeline-info">
<div class="timeline-content">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
</div>
</div>
<!--end 公告区域-->
<!--公告区域2-->
<div class="timeline-block">
<!--标题-->
<div class="timeline-title-info">
<div class="timeline-title">公告</div><div class="timeline-time">2015-11-02</div>
</div>
<!--内容-->
<div class="timeline-info">
<div class="timeline-content">我是内</div>
</div>
</div>
<!--end 公告区域-->
<!--公告区域3-->
<div class="timeline-block">
<!--标题-->
<div class="timeline-title-info">
<div class="timeline-title">公告</div><div class="timeline-time">2015-11-02</div>
</div>
<!--内容-->
<div class="timeline-info">
<div class="timeline-content">测试测试测试的测试测试测试测试的测试测试测试测试的测试测试测试测试测试测试的测试测试测试测试的测试测试测试测试的测试测试测试测试测试测试的测试测试测试测试的测试测试测试测试的测试测试测试测试测试测试的测试测试测试测试的测试测试测试测试的测试测试测试测试测试测试的测试测试测试测试的测试测试测试测试的测试测试测试测试测试测试的测试测试测试测试的测试测试测试测试的测试测试测试测试测试测试的测试测试测试测试的测试测试测试测试的测试测试测试测试测试测试的测试测试测试测试的测试测试测试测试的测试测试测试测试测试测试的测试测试测试测试的测试测试测试测试的测试测试测试测试测试测试的测试测试测试测试的测试测试测试测试的测试测试测试测试测试测试的测试测试测试测试的测试测试测试测试的测试测试测试测试测试测试的测试测试测试测试的测试测试测试测试的测试测试测试测试测试测试的测试测试测试测试的测试测试试测试测试</div>
</div>
</div>
<!--end 公告区域-->
</section>
<!--公告模块-->
</body>
</html>
网友评论