![[css] 小案例---模仿百度新闻列表，用定位做](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2xsLz9pPWQwYmE1M2U0MGNmZDRhZDdiYmY2MjliMjZhOTVlMWQ4LnBuZz8sdHlwZV9abUZ1WjNwb1pXNW5hR1ZwZEdrLHNoYWRvd18xMCx0ZXh0X2FIUjBjSE02THk5aWJHOW5MbU56Wkc0dWJtVjBMM0Z4WHpFME9Ua3pOVGt4LHNpemVfMTYsY29sb3JfRkZGRkZGLHRfNzA= "[css] 小案例---模仿百度新闻列表，用定位做")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.newsarea{
width: 562px;
height: 250px;
}
.newsarea .news-list-item{
width: 562px;
height: 125px;
}
.newsarea .news-list-item .img-item{
width: 181px;
height: 125px;
float: left;
}
.newsarea .news-list-item .img-item img{
width: 100%;
}
.newsarea .news-list-item .text-item{
width: 290px;
height: 125px;
/* background-color: rgb(207, 150, 150); */
float: left;
position: relative;
}
.newsarea .news-list-item .text-item .text-item-title,.newsarea .news-list-item .text-item .text-item-from{
padding-left: 12px;
}
.newsarea .news-list-item .text-item .text-item-from{
/* 用定位做，就不怕标题过于长了，不怕margin-bottom挤到它了 */
position: absolute;
bottom: 8px;
left: 0px;
}
</style>
</head>
<body>
<div>
<div class="hd">
<span class="menu-item">我的关注</span>
<span class="menu-item current">推荐</span>
<span class="menu-item">导航</span>
</div>
<div class="newsarea">
<div class="news-list-item">
<div class="img-item">
<img src="img/1.png" alt="">
</div>
<div class="text-item">
<div class="text-item-title">
美国：我回来了，新加坡媒体：你比中国慢了好几拍
</div>
<div class="text-item-from">
<span class="hot-point">热点</span>
<span class="src-net">环球时报</span>
<span class="src-time">08-07 09:46</span>
</div>
</div>
</div>
<div class="news-list-item">
</div>
</div>
</div>
</body>
</html>
![[css] 小案例---模仿百度新闻列表，用定位做](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2xsLz9pPTdiY2M1OWFmZGJhMTRmNzg5Nzg1ZmUwNDlhNjhiNDJlLnBuZz8sdHlwZV9abUZ1WjNwb1pXNW5hR1ZwZEdrLHNoYWRvd18xMCx0ZXh0X2FIUjBjSE02THk5aWJHOW5MbU56Wkc0dWJtVjBMM0Z4WHpFME9Ua3pOVGt4LHNpemVfMTYsY29sb3JfRkZGRkZGLHRfNzA= "[css] 小案例---模仿百度新闻列表，用定位做")