<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section{
background: gainsboro;
box-sizing: border-box;
width: 100%;
}
section::after{
content: '';
clear: both;
display: table;
}
article{
float: left;
width: 49%;
}
img{
padding: 10px;;
margin-bottom: -55px;
}
h1,p{
width: 66%;
margin-left: 20%;
}
p{
color: #ff0088;
}
</style>
</head>
<body>
<section>
<article>
<img src="img/test.jpg"width="100" alt="">
<h1>标题双列混排</h1>
<p>你要好好学习,以后就能开自己的公司,创造很多就业机会给别人。驱动力量是爱,好好学就会帮到更多的人。</p>
</article>
<article>
<img src="img/test.jpg"width="100" alt="">
<h1>标题双列混排</h1>
<p>你要好好学习,以后就能开自己的公司,创造很多就业机会给别人。驱动力量是爱,好好学就会帮到更多的人。</p>
</article>
</section>
</body>
</html>
双列图文布局
最新推荐文章于 2024-06-11 12:15:54 发布