双列图文布局

最新推荐文章于 2024-02-05 10:28:48 发布

li3196672779

最新推荐文章于 2024-02-05 10:28:48 发布

阅读量1k

点赞数 1

分类专栏： css布局

css布局专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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>