老师帮忙看下,谢谢

老师帮忙看下,谢谢

如果只加.col,是不是小屏及以上都是这样平分?

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="css/base.css">

    <link rel="stylesheet" href="css/grid-flex.css">

</head>

<body>

    <div class="container">

        <div class="row">

           <img src="img/1.jpg" alt="" class="col-md col-md-order-last " >

           <img src="img/2.jpg" alt="" class="col-md">

           <img src="img/3.jpg" alt="" class="col-md col-md-order-first">    

        </div>

    </div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2021-10-27 15:42:25

同学你好,是的,不过只有里面的元素默认宽度之和小于外层盒子宽度时,才会均分,超出后超出的内容就会换行显示了。目前只有三张图片,同学使用这种方式也是可以实现效果的。还是推荐同学指定具体占据几列,提高代码的可阅读性。

示例:

https://img1.sycdn.imooc.com//climg/617902c509fe5b6109710293.jpg

祝学习愉快~

  • 提问者 曼曼前端 #1

    这是老师上课教的方法,说是平分的说是可以用

    2021-10-27 15:50:58
  • 好帮手慕慕子 回复 提问者 曼曼前端 #2

    同学你好,平分的时候是可以用,不过,也要具体情况具体分析,粘贴的代码为例,如果一行有6张图片,由于这6张图片实际宽度超出的外层盒子,那么超出的部分会换行显示,分别均分显示,但是无法做到一行均分效果。如下:

    https://img1.sycdn.imooc.com//climg/61790692098b93e012510794.jpg

    祝学习愉快~


    2021-10-27 16:02:58
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师