26.图文混排

2019-11-02 18:31:48

字体：大中小

来源：转载

供稿：网友

media 图文混排media-left 图片的区域在左边显示media-right 图片的区域在右边显示media-body 内容区域media-heading 内容区域的标题media-middle 图片垂直对齐media-bottom 图片位于底部<!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>Bootstrap</title> <link rel="stylesheet" href="CSS/bootstrap.css" /></head><body> <div class="container"> <div class="row"> <div class="media"> <a href="http://www.baidu.com" class="media-left media-middle"> <img src="logo.jpg" width="100px"> </a> <div class="media-body"> <h4 class="media-heading">水果节</h4> <p>今天上街买了好多的新鲜水果，很好吃，也很便宜，于是多买了点，老板还给我5折优惠O(∩_∩)O哈哈~。</p> <p>今天上街买了好多的新鲜水果，很好吃，也很便宜，于是多买了点，老板还给我5折优惠O(∩_∩)O哈哈~。</p> <p>今天上街买了好多的新鲜水果，很好吃，也很便宜，于是多买了点，老板还给我5折优惠O(∩_∩)O哈哈~。</p> <p>今天上街买了好多的新鲜水果，很好吃，也很便宜，于是多买了点，老板还给我5折优惠O(∩_∩)O哈哈~。</p> <p>今天上街买了好多的新鲜水果，很好吃，也很便宜，于是多买了点，老板还给我5折优惠O(∩_∩)O哈哈~。</p> </div> </div> </div> </div> <script src="js/jquery-2.1.0.js"></script> <script src="js/bootstrap.js"></script></body></html>

这里写图片描述