为什么我这样写样式没有应用上去
来源：5-3 自由编程
Ting111
2020-08-23 16:52:24
<!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>
7回答
-
同学你好，问题解答如下：
1、两段代码都是可以的，但是可以进行优化，图片可以设置宽度为100%，设置为块元素去掉间隙美观一些
排序类名需要写完整
2、order是用来排序的，每一列显示的先后顺序，不会实现垂直排列（前提是水平排列）；offset中设置的是margin-left值，如果水平方向上不够就会被挤到下一行，可以达到垂直显示的效果。
3、用wrap直接换行不需要写offset了
自己再理解下，祝学习愉快！
0 -
Ting111
提问者
2020-08-29
用wrap直接换行还需要写offset吗
0 -
Ting111
提问者
2020-08-29
<!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>
我改了一下，这样好像也可以实现效果，是对的吗
0 -
Ting111
提问者
2020-08-29
老师我还有一个问题，这个offset和order是可以直接把图片从水平排列挤到垂直排列吗。
0 -
Ting111
提问者
2020-08-29
<!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>
这样对了吗
0 -
好帮手慕码
2020-08-23
同学你好，不可以直接写。有一些样式是添加在container和row上的，例如：
并且，当屏幕变化到一定宽度的时候，图片的位置还需要改变，那么就需要用到ol-md-order-1等类名。
祝学习愉快~
0 -
好帮手慕码
2020-08-23
同学你好，缺少一些设置。可以添加container、row类名：
另，可以参考如下：
（1）在中屏（768px-992px）以下，图片三行一列显示
（2）在中屏（768px-992px）以上，图片一行三列显示，并且排列顺序与中屏以下排列顺序相反
可以再练习一下。祝学习愉快~
0h020-08-23
相似问题