首页 > 代码库 > 图片响应式排列
图片响应式排列
图片的响应式排列(此处用四分图做例)
四分图的大体可分为：
类别一：
类别二：
最终响应式效果为：
----------------------------------------
此处用bootstrap框架
----------------------------------------
直接引用：
1 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">2 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>3 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
------------
类别一
HTML代码部分为：
<div class="container" style="width: 400px;"> <div class="row"> <div class="col-md-6" style="border: 1px solid red;">图一</div> <div class="col-md-6" style="border: 1px solid red;">图二</div> </div> <div class="row"> <div class="col-md-6" style="border: 1px solid red;">图三</div> <div class="col-md-6" style="border: 1px solid red;">图四</div> </div></div>
效果图：
和
------------
类别二
HTML代码部分：
1 <div class="container" style="width: 400px;"> 2 <div class="row"> 3 <div class="col-md-6" style="border: 1px solid blue;">图一</div> 4 <div class="col-md-6" style="border: 1px solid blue;">图二</div> 5 </div> 6 <div class="row"> 7 <div class="col-md-6 col-md-push-6" style="border: 1px solid blue;">图三</div> 8 <div class="col-md-6 col-md-pull-6" style="border: 1px solid blue;">图四</div> 9 </div>10 </div>
效果图：
和
-----------------------------------------------
全部代码：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 7 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 8 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 9 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>10 </head>11 <body>12 13 <div class="container" style="width: 400px;">14 <div class="row">15 <div class="col-md-6" style="border: 1px solid red;">图一</div>16 <div class="col-md-6" style="border: 1px solid red;">图二</div>17 </div>18 <div class="row">19 <div class="col-md-6" style="border: 1px solid red;">图三</div>20 <div class="col-md-6" style="border: 1px solid red;">图四</div>21 </div>22 </div>23 24 <div class="container" style="width: 400px;">25 <div class="row">26 <div class="col-md-6" style="border: 1px solid blue;">图一</div>27 <div class="col-md-6" style="border: 1px solid blue;">图二</div>28 </div>29 <div class="row">30 <div class="col-md-6 col-md-push-6" style="border: 1px solid blue;">图三</div>31 <div class="col-md-6 col-md-pull-6" style="border: 1px solid blue;">图四</div>32 </div>33 </div>34 35 </body>36 </html>
图片响应式排列
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。