图文混排

最新推荐文章于 2022-11-28 00:10:48 发布

sunny_Destiny

最新推荐文章于 2022-11-28 00:10:48 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/sunny_Destiny/article/details/104492813

版权

图文混排

今天我们来了解一下图文混排，首先我们来了解一下基本的知识。

//media-left(right) 图片的区域 在左边显示(右边)
//media-body 内容区域
//media-heading 内容区域里的标题
//media-middle 图片居中
//media-bottom 图片居下

接下来我们分别来看一下效果图。

图片居左

图片居左.png

代码其实也非常简单！

<div class="media">
           <div class="media-left">
               <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
           </div>
           <div class="media-body">
               <h4 class="media-heading">上善若水</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
           </div>
       </div>

图片居右

图片居右.png

接下来我们来看一下代码！

<div class="media">
            <div class="media-body">
                <h4 class="media-heading">上善若水</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
            </div>
            <div class="media-right">
                <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
            </div>
        </div>

图片居两端

图片居两端.png

接下来我们来看一下代码！

<div class="media">
            <div class="media-left media-middle">
                <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">上善若水</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
            </div>
            <div class="media-right">
                <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
            </div>
        </div>

是不是觉得很简单呐！最后把所有的代码放上。

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>媒体</title>
       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
       <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
       <script type="text/javascript" src="js/bootstrap.min.js"></script>
       <style>
           .media {
               padding: 30px;
           }
       </style>
   </head>

   <body>
       <div class="media">
           <div class="media-left">
               <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
           </div>
           <div class="media-body">
               <h4 class="media-heading">上善若水</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
           </div>
       </div>
       <div class="media">
           <div class="media-body">
               <h4 class="media-heading">上善若水</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
           </div>
           <div class="media-right">
               <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
           </div>
       </div>
       <div class="media">
           <div class="media-left media-middle">
               <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
           </div>
           <div class="media-body">
               <h4 class="media-heading">上善若水</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
           </div>
           <div class="media-right">
               <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
           </div>
       </div>
   </body>

</html>

愿你三冬暖,愿你春不寒,愿你天黑有灯,下雨有伞。

小晴天

sunny_Destiny

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
图文混排

图文混排今天我们来了解一下图文混排，首先我们来了解一下基本的知识。//media-left(right) 图片的区域在左边显示(右边)//media-body 内容区域//media-heading 内容区域里的标题//media-middle 图片居中//media-bottom 图片居下接下来我们分别来看一下效果图。图片居左图片居左.png代...
复制链接

扫一扫