26.圖文混排

2024-04-27 15:15:18

字體：大中小

來源：轉載

供稿：網友

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

這里寫圖片描述