Html 当屏幕水平收缩时，如何防止同一行上的图像移动到另一行？
Html 当屏幕水平收缩时，如何防止同一行上的图像移动到另一行？,html,css,Html,Css,#div{} img{ 高度：200px； } #img1{ 浮动：左； } #img2{ 浮动：对； } #img3{ 浮动：对； } 试试这段代码 #div:：after{ 显示：表格； 内容：“； 明确：两者皆有； } #部门经理{ 浮动：左； 宽度：33.33%； 最大宽度：100%； } 演示 请尝试以下代码： ul.img{ 保证金：0； 填充：0； 空白：nowrap； 宽度：500px； 溢出-x：自动； } ul.img li{ 显示：内联块； 宽度：200px； 高度：
#div{}
img{
高度：200px；
}
#img1{
浮动：左；
}
#img2{
浮动：对；
}
#img3{
浮动：对；
}
#div:：after{
显示：表格；
内容：“；
明确：两者皆有；
}
#部门经理{
浮动：左；
宽度：33.33%；
最大宽度：100%；
}
演示
ul.img{
保证金：0；
填充：0；
空白：nowrap；
宽度：500px；
溢出-x：自动；
}
ul.img li{
显示：内联块；
宽度：200px；
高度：200px；
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
<style>
#div {
display: flex;
flex-wrap: wrap;
}
#div img{
width: 33.33%;
height: 200px;
}
</style>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
演示
#div{
显示器：flex；
柔性包装：包装；
}
#部门经理{
宽度：33.33%；
高度：200px；
}
#img1 {
position: fixed;
width:200px;
left: 0px;
top: 0px;
border: 0px;
padding: 0px;}
#img2 {
position: fixed;
width:200px;
left: 200px;
top: 0px;
border:0px;
padding: 0px;}
#img3 {
position: fixed;
width:200px;
left: 400px;
top: 0px;
border: 0px;
padding: 0px;}
您需要为每个图像添加单独的div，并按
display:flexmarginflex#div{
显示器：flex；
}
.新的{
最大高度：200px；
}
.左{
右边距：自动；
}
img{
最大宽度：100%；
最大高度：200px；
}
@介质（最大宽度：768px）{
.隐藏的X{
显示：无；
}
}