为什么我这样写样式没有应用上去
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
box-sizing: border-box;
margin:0;
padding: 0;
}
.ig1,.ig2,.ig3{
display: flex;
flex-direction: row;
}
img{
width: 100%;
}
</style>
<link rel="stylesheet" type="text/css" href="C:\Users\fengting\Downloads\响应式布局（源码）\css\grid-flex.css">
</head>
<body>
<div class="ig1 col-12 col-md-4">
<img src="img\1.jpg">
</div>
<div class="ig2 col-12 col-md-4">
<img src="img\2.jpg">
</div>
<div class="ig3 col-12 col-md-4">
<img src="img\3.jpg">
</div>
</body>
</html>
正在回答
同学你好，问题解答如下：
1、两段代码都是可以的，但是可以进行优化，图片可以设置宽度为100%，设置为块元素去掉间隙美观一些
排序类名需要写完整
2、order是用来排序的，每一列显示的先后顺序，不会实现垂直排列（前提是水平排列）；offset中设置的是margin-left值，如果水平方向上不够就会被挤到下一行，可以达到垂直显示的效果。
3、用wrap直接换行不需要写offset了
自己再理解下，祝学习愉快！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
box-sizing: border-box;
margin:0;
padding: 0;
}
body{
display: flex;
align-content: center;
justify-content: center;
}
.container{
display: flex;
width: 90%;
margin-top: 30px;
flex-wrap: wrap;
}
</style>
<link rel="stylesheet" type="text/css" href="C:\Users\fengting\Downloads\响应式布局（源码）\css\grid-flex.css">
</head>
<body>
<div class="container">
<div class="ig1 col-12 col-md-4 col-md-order-4">
<img src="img\1.jpg">
</div>
<div class="ig2 col-12 col-md-4">
<img src="img\2.jpg">
</div>
<div class="ig3 col-12 col-md-4 col-md-order-1">
<img src="img\3.jpg">
</div>
</div>
</body>
</html>
我改了一下，这样好像也可以实现效果，是对的吗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
box-sizing: border-box;
margin:0;
padding: 0;
}
.container{
display: flex;
width: 90%;
margin-top: 30px;
}
.row{
width: 100%;
}
</style>
<link rel="stylesheet" type="text/css" href="C:\Users\fengting\Downloads\响应式布局（源码）\css\grid-flex.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="ig1 col-12 col-md-4 col-md-order-4">
<img src="img\1.jpg">
</div>
<div class="ig2 col-12 col-md-4">
<img src="img\2.jpg">
</div>
<div class="ig3 col-12 col-md-4 col-md-order-1">
<img src="img\3.jpg">
</div>
</div>
</div>
</body>
</html>
这样对了吗
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星