请老师审批
来源：5-3 自由编程
丶筱云
2019-12-11 17:01:27
1、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/grid.css">
<style>
.container{
background-color: #eee;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-md col-md-order-last">
<img src="img/1.jpg" alt="">
</div>
<div class="col-12 col-md">
<img src="img/2.jpg" alt="">
</div>
<div class="col-12 col-md col-md-order-first">
<img src="img/3.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
2、grid.css
.container{
width: 100%;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 576px){
.container{
width: 540px;
}
}
@media (min-width: 768px){
.container{
width: 720px;
}
}
@media (min-width: 992px){
.container{
width: 960px;
}
}
@media (min-width: 1200px){
.container{
width: 1140px;
}
}
.row{
display: flex;
flex-wrap: wrap;
}
.col,.col-sm,.col-md,.col-lg,.col-xl,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12{
padding-left: 15px;
padding-right: 15px;
}
.col{
flex-grow: 1;
flex-basis: 0;
flex-shrink: 0;
}
.col-1{
flex: 0 0 8.33333333%;
}
.col-2{
flex: 0 0 16.66666667%;
}
.col-3{
flex: 0 0 25%;
}
.col-4{
flex: 0 0 0.33333333%;
}
.col-5{
flex: 0 0 0.41666667%;
}
.col-6{
flex: 0 0 50%;
}
.col-7{
flex: 0 0 58.33333333%;
}
.col-8{
flex: 0 0 66.66666667%;
}
.col-9{
flex: 0 0 75%;
}
.col-10{
flex: 0 0 83.33333333%;
}
.col-11{
flex: 0 0 91.66666667%;
}
.col-12{
flex: 0 0 100%;
}
@media (min-width: 576px){
.col-sm{
flex-grow: 1;
flex-basis: 0;
flex-shrink: 0;
}
.col-sm-1{
flex: 0 0 8.33333333%;
}
.col-sm-2{
flex: 0 0 16.66666667%;
}
.col-sm-3{
flex: 0 0 25%;
}
.col-sm-4{
flex: 0 0 0.33333333%;
}
.col-sm-5{
flex: 0 0 0.41666667%;
}
.col-sm-6{
flex: 0 0 50%;
}
.col-sm-7{
flex: 0 0 58.33333333%;
}
.col-sm-8{
flex: 0 0 66.66666667%;
}
.col-sm-9{
flex: 0 0 75%;
}
.col-sm-10{
flex: 0 0 83.33333333%;
}
.col-sm-11{
flex: 0 0 91.66666667%;
}
.col-sm-12{
flex: 0 0 100%;
}
}
@media (min-width: 768px){
.col-md{
flex-grow: 1;
flex-basis: 0;
flex-shrink: 0;
}
.col-md-1{
flex: 0 0 8.33333333%;
}
.col-md-2{
flex: 0 0 16.66666667%;
}
.col-md-3{
flex: 0 0 25%;
}
.col-md-4{
flex: 0 0 0.33333333%;
}
.col-md-5{
flex: 0 0 0.41666667%;
}
.col-md-6{
flex: 0 0 50%;
}
.col-md-7{
flex: 0 0 58.33333333%;
}
.col-md-8{
flex: 0 0 66.66666667%;
}
.col-md-9{
flex: 0 0 75%;
}
.col-md-10{
flex: 0 0 83.33333333%;
}
.col-md-11{
flex: 0 0 91.66666667%;
}
.col-md-12{
flex: 0 0 100%;
}
}
@media (min-width: 992px){
.col-lg{
flex-grow: 1;
flex-basis: 0;
flex-shrink: 0;
}
.col-lg-1{
flex: 0 0 8.33333333%;
}
.col-lg-2{
flex: 0 0 16.66666667%;
}
.col-lg-3{
flex: 0 0 25%;
}
.col-lg-4{
flex: 0 0 0.33333333%;
}
.col-lg-5{
flex: 0 0 0.41666667%;
}
.col-lg-6{
flex: 0 0 50%;
}
.col-lg-7{
flex: 0 0 58.33333333%;
}
.col-lg-8{
flex: 0 0 66.66666667%;
}
.col-lg-9{
flex: 0 0 75%;
}
.col-lg-10{
flex: 0 0 83.33333333%;
}
.col-lg-11{
flex: 0 0 91.66666667%;
}
.col-lg-12{
flex: 0 0 100%;
}
}
@media (min-width: 1200px){
.col-xl{
flex-grow: 1;
flex-basis: 0;
flex-shrink: 0;
}
.col-xl-1{
flex: 0 0 8.33333333%;
}
.col-xl-2{
flex: 0 0 16.66666667%;
}
.col-xl-3{
flex: 0 0 25%;
}
.col-xl-4{
flex: 0 0 0.33333333%;
}
.col-xl-5{
flex: 0 0 0.41666667%;
}
.col-xl-6{
flex: 0 0 50%;
}
.col-xl-7{
flex: 0 0 58.33333333%;
}
.col-xl-8{
flex: 0 0 66.66666667%;
}
.col-xl-9{
flex: 0 0 75%;
}
.col-xl-10{
flex: 0 0 83.33333333%;
}
.col-xl-11{
flex: 0 0 91.66666667%;
}
.col-xl-12{
flex: 0 0 100%;
}
}
/*扩展*/
.offset-0{
margin-left: 0;
}
.offset-1{
margin-left: 8.33333333%;
}
.offset-2{
margin-left: 16.66666667%;
}
.offset-3{
margin-left: 25%;
}
.offset-4{
margin-left: 33.33333333% ;
}
.offset-5{
margin-left: 41.66666667%;
}
.offset-6{
margin-left: 50%;
}
.offset-7{
margin-left: 58.33333333%;
}
.offset-8{
margin-left: 66.66666667%;
}
.offset-9{
margin-left: 75%;
}
.offset-10{
margin-left: 83.33333333%;
}
.offset-11{
margin-left: 91.66666667%;
}
.offset-12{
margin-left: 100%;
}
/*sm*/
@media (min-width: 576px){
.offset-sm-0{
margin-left: 0;
}
.offset-sm-1{
margin-left: 8.33333333%;
}
.offset-sm-2{
margin-left: 16.66666667%;
}
.offset-sm-3{
margin-left: 25%;
}
.offset-sm-4{
margin-left: 33.33333333% ;
}
.offset-sm-5{
margin-left: 41.66666667%;
}
.offset-sm-6{
margin-left: 50%;
}
.offset-sm-7{
margin-left: 58.33333333%;
}
.offset-sm-8{
margin-left: 66.66666667%;
}
.offset-sm-9{
margin-left: 75%;
}
.offset-sm-10{
margin-left: 83.33333333%;
}
.offset-sm-11{
margin-left: 91.66666667%;
}
.offset-sm-12{
margin-left: 100%;
}
}
/*md*/
@media (min-width: 768px){
.offset-md-0{
margin-left: 0;
}
.offset-md-1{
margin-left: 8.33333333%;
}
.offset-md-2{
margin-left: 16.66666667%;
}
.offset-md-3{
margin-left: 25%;
}
.offset-md-4{
margin-left: 33.33333333% ;
}
.offset-md-5{
margin-left: 41.66666667%;
}
.offset-md-6{
margin-left: 50%;
}
.offset-md-7{
margin-left: 58.33333333%;
}
.offset-md-8{
margin-left: 66.66666667%;
}
.offset-md-9{
margin-left: 75%;
}
.offset-md-10{
margin-left: 83.33333333%;
}
.offset-md-11{
margin-left: 91.66666667%;
}
.offset-md-12{
margin-left: 100%;
}
}
/*lg*/
@media (min-width: 992px){
.offset-lg-0{
margin-left: 0;
}
.offset-lg-1{
margin-left: 8.33333333%;
}
.offset-lg-2{
margin-left: 16.66666667%;
}
.offset-lg-3{
margin-left: 25%;
}
.offset-lg-4{
margin-left: 33.33333333% ;
}
.offset-lg-5{
margin-left: 41.66666667%;
}
.offset-lg-6{
margin-left: 50%;
}
.offset-lg-7{
margin-left: 58.33333333%;
}
.offset-lg-8{
margin-left: 66.66666667%;
}
.offset-lg-9{
margin-left: 75%;
}
.offset-lg-10{
margin-left: 83.33333333%;
}
.offset-lg-11{
margin-left: 91.66666667%;
}
.offset-lg-12{
margin-left: 100%;
}
}
/*xl*/
@media (min-width: 1200px){
.offset-xl-0{
margin-left: 0;
}
.offset-xl-1{
margin-left: 8.33333333%;
}
.offset-xl-2{
margin-left: 16.66666667%;
}
.offset-xl-3{
margin-left: 25%;
}
.offset-xl-4{
margin-left: 33.33333333% ;
}
.offset-xl-5{
margin-left: 41.66666667%;
}
.offset-xl-6{
margin-left: 50%;
}
.offset-xl-7{
margin-left: 58.33333333%;
}
.offset-xl-8{
margin-left: 66.66666667%;
}
.offset-xl-9{
margin-left: 75%;
}
.offset-xl-10{
margin-left: 83.33333333%;
}
.offset-xl-11{
margin-left: 91.66666667%;
}
.offset-xl-12{
margin-left: 100%;
}
}
.col-order-first{
order: -1;
}
.col-order-0{
order: 0;
}
.col-order-1{
order: 1;
}
.col-order-2{
order: 2;
}
.col-order-3{
order: 3;
}
.col-order-4{
order: 4;
}
.col-order-5{
order: 5;
}
.col-order-6{
order: 6;
}
.col-order-7{
order: 7;
}
.col-order-8{
order: 8;
}
.col-order-9{
order: 9;
}
.col-order-10{
order: 10;
}
.col-order-11{
order: 11;
}
.col-order-12{
order: 12;
}
.col-order-last{
order: 13;
}
@media (min-width: 576px){
.col-sm-order-first{
order: -1;
}
.col-sm-order-0{
order: 0;
}
.col-sm-order-1{
order: 1;
}
.col-sm-order-2{
order: 2;
}
.col-sm-order-3{
order: 3;
}
.col-sm-order-4{
order: 4;
}
.col-sm-order-5{
order: 5;
}
.col-sm-order-6{
order: 6;
}
.col-sm-order-7{
order: 7;
}
.col-sm-order-8{
order: 8;
}
.col-sm-order-9{
order: 9;
}
.col-sm-order-10{
order: 10;
}
.col-sm-order-11{
order: 11;
}
.col-sm-order-12{
order: 12;
}
.col-sm-order-last{
order: 13;
}
}
@media (min-width: 768px){
.col-md-order-first{
order: -1;
}
.col-md-order-0{
order: 0;
}
.col-md-order-1{
order: 1;
}
.col-md-order-2{
order: 2;
}
.col-md-order-3{
order: 3;
}
.col-md-order-4{
order: 4;
}
.col-md-order-5{
order: 5;
}
.col-md-order-6{
order: 6;
}
.col-md-order-7{
order: 7;
}
.col-md-order-8{
order: 8;
}
.col-md-order-9{
order: 9;
}
.col-md-order-10{
order: 10;
}
.col-md-order-11{
order: 11;
}
.col-md-order-12{
order: 12;
}
.col-md-order-last{
order: 13;
}
}
.col-sm-order-first{
order: -1;
}
.col-sm-order-0{
order: 0;
}
.col-sm-order-1{
order: 1;
}
.col-sm-order-2{
order: 2;
}
.col-sm-order-3{
order: 3;
}
.col-sm-order-4{
order: 4;
}
.col-sm-order-5{
order: 5;
}
.col-sm-order-6{
order: 6;
}
.col-sm-order-7{
order: 7;
}
.col-sm-order-8{
order: 8;
}
.col-sm-order-9{
order: 9;
}
.col-sm-order-10{
order: 10;
}
.col-sm-order-11{
order: 11;
}
.col-sm-order-12{
order: 12;
}
.col-sm-order-last{
order: 13;
}
}
@media (min-width: 992px){
.col-lg-order-first{
order: -1;
}
.col-lg-order-0{
order: 0;
}
.col-lg-order-1{
order: 1;
}
.col-lg-order-2{
order: 2;
}
.col-lg-order-3{
order: 3;
}
.col-lg-order-4{
order: 4;
}
.col-lg-order-5{
order: 5;
}
.col-lg-order-6{
order: 6;
}
.col-lg-order-7{
order: 7;
}
.col-lg-order-8{
order: 8;
}
.col-lg-order-9{
order: 9;
}
.col-lg-order-10{
order: 10;
}
.col-lg-order-11{
order: 11;
}
.col-lg-order-12{
order: 12;
}
.col-lg-order-last{
order: 13;
}
}
@media (min-width: 1200px){
.col-xl-order-first{
order: -1;
}
.col-xl-order-0{
order: 0;
}
.col-xl-order-1{
order: 1;
}
.col-xl-order-2{
order: 2;
}
.col-xl-order-3{
order: 3;
}
.col-xl-order-4{
order: 4;
}
.col-xl-order-5{
order: 5;
}
.col-xl-order-6{
order: 6;
}
.col-xl-order-7{
order: 7;
}
.col-xl-order-8{
order: 8;
}
.col-xl-order-9{
order: 9;
}
.col-xl-order-10{
order: 10;
}
.col-xl-order-11{
order: 11;
}
.col-xl-order-12{
order: 12;
}
.col-xl-order-last{
order: 13;
}
}
.d-block{
display: block !important;
}
.d-none{
display: none !important;
}
@media (min-width: 576px){
.d-sm-block{
display: block !important;
}
.d-sm-none{
display: none !important;
}
}
@media (min-width: 768px){
.d-md-block{
display: block !important;
}
.d-md-none{
display: none !important;
}
}
@media (min-width: 992px){
.d-lg-block{
display: block !important;
}
.d-lg-none{
display: none !important;
}
}
@media (min-width: 1200px){
.d-xl-block{
display: block !important;
}
.d-xl-none{
display: none !important;
}
}
1回答
-
好帮手慕夭夭
2019-12-11
同学你好，三行一列显示时，图片宽度不能铺满容器
建议如下完善：
图片宽度相对父元素100%显示
row要设置左右间距
另外，课程源码中有grid.css，可以直接拿来用哦。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
