Html 为什么不是'；弹性包装是否均匀？

我正在努力使一个网站响应良好（在代码段中）。不过，它的行为并不像我预期的那样。由于某种原因，在600到900（或ipad）的宽度范围内，这些图片形成了一个奇怪的形状。我不知道是什么引起的。我期望发生的是，这些图片将形成3行，每行有2张图片，底部有一张图片。知道怎么解决吗

*{
框大小：边框框；
填充：0；
保证金：0；
}
.行{
显示器：flex；
}
img[src$=“jpg”]{
宽度：350px；
高度：250px；
显示：块；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
边缘顶部：50px；
}
.专栏1{
利润率：20px；
位置：相对位置；
身高：0%；
}
.专栏2{
利润率：20px；
位置：相对位置；
}
.文本{
保证金权利：60%；
}
.文本h1{
字体系列：muli，无衬线；
字体大小：3.5rem；
字号：100；
}
.专栏2.封面，
.专栏1.封面{
底部：0px；
位置：绝对位置；
不透明度：0.8；
字体系列：muli，无衬线；
字号：500；
宽度：100%；
高度：50px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：白色；
}
.黑暗{
背景色：#0E4C92；
}
.光{
背景色：#00B5FD；
}
.图标{
位置：绝对位置；
右：-30px；
最高：8%；
宽度：60px；
高度：60px；
边界半径：50%；
方框阴影：0 0 2px 1px灰色；
}
@介质（最大宽度：960像素）{
.行{
证明内容：中心；
柔性包装：包装；
}
.文本h1{
左：0px；
}
.图标{
宽度：60px；
高度：60px；
右：-30px
}
img[src$=“jpg”]{
宽度：250px；
高度：250px；
显示：块；
}
.文本{
右边距：0%；
}
}

医疗应用的解决方案
流体
医疗器械
外科工具和仪器
给药装置
包装材料
家庭护理
实验室用具

HTML

<div class="container-row">
  <div class="row1 row"></div>
  <div class="row2 row"></div>
  <div class="row3 row"></div>
</div>

HTML

<div class="container-row">
  <div class="row1 row"></div>
  <div class="row2 row"></div>
  <div class="row3 row"></div>
</div>

---

嗯，您的

容器是
flex
，您有3个
flex
div，因此它们将垂直显示为3组，其中包含
.column
元素。你不能像那样“合并”它们

更好的解决方案是在
容器中使用
显示网格
和
网格模板列
，并使用不同的类将元素分组


.container{
宽度：400px；
显示：网格；
网格模板列：1fr 1fr 1fr
}
.类{
宽度：100px；
高度：100px；
边缘底部：50px；
}
.1级{
背景：#592941；
}
.2级{
背景#498467；
}
.3级{
背景：EDE5A6；
}
@介质（最大宽度：960像素）{
.集装箱{
宽度：250px；
网格模板列：1fr 1fr
}
}
嗯，您的
容器是
flex
，您有3个
flex
div，因此它们将垂直显示为3组，其中包含
.column
元素。你不能像那样“合并”它们

更好的解决方案是在
容器中使用
显示网格
和
网格模板列
，并使用不同的类将元素分组


.container{
宽度：400px；
显示：网格；
网格模板列：1fr 1fr 1fr
}
.类{
宽度：100px；
高度：100px；
边缘底部：50px；
}
.1级{
背景：#592941；
}
.2级{
背景#498467；
}
.3级{
背景：EDE5A6；
}
@介质（最大宽度：960像素）{
.集装箱{
宽度：250px；
网格模板列：1fr 1fr
}
}
您可以试试这个。我更改了一些代码


*{
框大小：边框框；
填充：0；
保证金：0；
}
.行{
显示器：flex；
对齐项目：居中；
}
.一般地区{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
}
img[src$=“jpg”]{
宽度：350px；
高度：250px；
显示：块；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
边缘顶部：50px；
证明内容：中心；
}
.专栏1{
利润率：20px；
位置：相对位置；
身高：0%；
}
.专栏2{
利润率：20px；
位置：相对位置；
}
.文本{
保证金权利：60%；
}
.文本h1{
字体系列：muli，无衬线；
字体大小：3.5rem；
字号：100；
}
.专栏2.封面，
.专栏1.封面{
底部：0px；
位置：绝对位置；
不透明度：0.8；
字体系列：muli，无衬线；
字号：500；
宽度：100%；
高度：50px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：白色；
}
.黑暗{
背景色：#0E4C92；
}
.光{
背景色：#00B5FD；
}
.图标{
位置：绝对位置；
右：-30px；
最高：8%；
宽度：60px；
高度：60px；
边界半径：50%；
方框阴影：0 0 2px 1px灰色；
}
@介质（最大宽度：960像素）{
.行{
证明内容：中心；
柔性包装：包装；
弹性基准：50%；
}
.文本h1{
左：0px；
}
.图标{
宽度：60px；
高度：60px；
右：-30px
}
img[src$=“jpg”]{
宽度：250px；
高度：250px；
显示：块；
}
.文本{
右边距：0%；
}
}

文件
医疗应用的解决方案
流体
医疗器械