对于不同的图文组合,划分好区域最重要,区域划分好,文字图片放进去即可。
一:图文左右排列
![](https://i-blog.csdnimg.cn/blog_migrate/1a4e57a47f47cab73f0ce3642fedf43e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3efb83f1f2d2a432a7d2f81965662c1e.png)
<!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>1</title>
<style>
*{
margin: 0;
padding: 0;
}
.item {
width: 643px;
height: 174px;
border-bottom: 1px solid lightgray;
/* background-color: pink; */
}
.item .content {
width: 457px;
height: 174px;
/* background-color: gold; */
float: left;
}
.item .content .title{
height: 24px;
line-height: 24px;
overflow: hidden;
/* background-color: cyan; */
font-size: 20px;
font-weight: 900;
margin-top: 24px;
}
.item .content .words {
height: 78px;
line-height: 26px;
font-size: 14px;
overflow: hidden;
color: lightgray;
margin-top: 10px;
/* background-color: bisque; */
}
.item .content .bottom{
height: 20px;
/* background-color:aqua; */
margin-top: 6px;
font-size: 14px;
color: lightgray;
}
.item .content .bottom p{
float: left;
height: 20px;
line-height: 20px;
font-size: 12px;
}
.item .content .bottom .common{
float: left;
height: 20px;
overflow: hidden;
margin-left: 10px;
padding: 0 3px;
}
.item .content .bottom img {
margin-top: 2px;
height: 16px;
float: left;
margin-right: 4px;
}
.item .content .bottom .text{
float: left;
padding: 0 5px;
}
/* .item .content .bottom .b2 img {
margin-top: 2px;
height: 16px;
float: left;
margin-right: 4px;
} */
.item .right {
width: 148px;
height: 98px;
float: right;