图文混排

程序员文章站 2022-04-25 07:51:58

...

图文混排

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

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

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