1:float实现
<!doctype html>
<html>
<head>
<title>hello</title>
<style type="text/css">
.content{
width:1000px;
height:500px;
background: #ff0;
}
.cell{
width:600px;
height:100px;
margin-bottom:10px;
background: #f0f;
}
.img{
float: left;
width: 20%;
height:100px;
margin-right: 2%;
}
.text{
float:right;
width:78%;
height:100px;
}
img{
width:100px;
height:100px;
}
.title{
font-size:20px;
font-weight: 700;
}
.pcontent{
font-size: 18px;
font-weight: 400;
}
</style>
</head>
<body>
<div class="content">
<div class='cell'>
<div class='img'></div>
<div class='text'>
<p class='title'>title1</p>
<p class='pcontent'>pppppppppppppppppppppppppp</p>
</div>
</div>
<div class='cell'>
<div class='img'></div>
<div class='text'>
<p class='title'>title2</p>
<p class='pcontent'>pppppppppppppppppppppppppp</p>
</div>
<div>
</div>
</body>
</html>显示结果：
2:flex实现
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.content{
height:500px;
width:1000px;
background: #ff0;
}
.cell{
width:100%;
height:100px;
margin-bottom: 10px;
display: flex;
}
.img{
flex:0 0 15%;
}
img{
width:100px;
}
.text{
flex: 0 0 80%;
}
.title{
font-size:20px;
font-weight: 700;
}
.pcontent{
font-size: 18px;
font-weight: 400;
}
</style>
</head>
<body>
<div class="content">
<div class='cell'>
<div class='img'></div>
<div class='text'>
<p class='title'>title1</p>
<p class='pcontent'>pppppppppppppppppppppppppp</p>
</div>
</div>
<div class='cell'>
<div class='img'></div>
<div class='text'>
<p class='title'>title2</p>
<p class='pcontent'>pppppppppppppppppppppppppp</p>
</div>
<div>
</div>
</body>
</html>展示结果：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。