css：图文组合

最新推荐文章于 2023-11-11 14:57:18 发布

憨憨励志学前端

最新推荐文章于 2023-11-11 14:57:18 发布

阅读量638

点赞数

分类专栏： CSS基础文章标签： css

本文链接：https://blog.csdn.net/weixin_52589346/article/details/124229877

版权

本文主要探讨了CSS在页面布局中常见的图文组合方式，包括上下排列和左右排列两种布局。通过实例代码展示如何实现这两种图文布局，帮助读者理解和应用。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、前言
二、案例

一、前言

图文组合是页面中常见的布局，大致可以分为三类：上下排列，左右排列，以及图文混排。下面结合几个案例，进行解释。

二、案例

1.上下排列

代码如下

<style>
    *{
   
        margin: 0;
        padding: 0;
        list-style: 0;
    }
    .box1{
   
    width: 850px;
    height: 600px;

    }
    
    
    .box2{
   
        height:  280px;
        
        width: 150px;
        text-align: center;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    img{
   
        height: 140px;
        width: 100px;
        margin-top: 12px;
    }
    .p1{
   
        font-size: 16px;
        color: #101010;
       
       margin-bottom: 20px;
    }
    .p2