Php CSS-在Wordpress中重新调整大小时,元素不会相互堆叠

Php CSS-在Wordpress中重新调整大小时,元素不会相互堆叠,php,css,wordpress,responsive-design,Php,Css,Wordpress,Responsive Design,我正在对wordpress网站应用一些媒体查询样式规则。一个部分有两行,3 x 4列。每行中都有一个图像,下面有一个段落。当我重新调整页面大小时,我需要将每个图像堆叠在各自段落的顶部。我在我的前端测试站点上进行了测试,但当我在wordpress站点上进行测试时,它们会排成一行 下面是一段代码片段- 正文{ 边距:0自动0自动; } .集装箱{ 保证金:自动; 最大宽度:100%; 左侧填充:10px; 右边填充:10px; } 第#节团队{ 高度:800px; 最大宽度:100%; } 第#组

我正在对wordpress网站应用一些媒体查询样式规则。一个部分有两行,3 x 4列。每行中都有一个图像,下面有一个段落。当我重新调整页面大小时,我需要将每个图像堆叠在各自段落的顶部。我在我的前端测试站点上进行了测试,但当我在wordpress站点上进行测试时,它们会排成一行

下面是一段代码片段-

正文{
边距:0自动0自动;
}
.集装箱{
保证金:自动;
最大宽度:100%;
左侧填充:10px;
右边填充:10px;
}
第#节团队{
高度:800px;
最大宽度:100%;
}
第#组分区行{
高度:350px;
}
#四队{
位置:相对位置;
宽度:320px;
填充:30px;
}
#h4队{
文本对齐:居中;
边缘顶部:30px;
}
#团队img{
显示:内联块;
边界半径:50%;
位置:绝对位置;
底部:50%;
左:40%;
转换:翻译(-50%,-50%);
}
#p队{
文本对齐:居中;
字体大小:10px;
边缘顶部:100px;
}
@媒体屏幕和屏幕(最大宽度:1000px){
分区集装箱{
浮动:无;
保证金:0;
宽度:计算(100%-40px);
框大小:边框框;
}
分栏{
浮动:无;
}
}
@媒体屏幕和屏幕(最大宽度:480px){
身体{
最大宽度:500px;
边框:1px虚线#ccc;
最小高度:400px;
}
第#节团队{
浮动:无;
高度:自动;
}
#四队{
宽度:自动;
高度:自动;
位置:相对位置;
转换:翻译(-30%,-5%);
}
}

会见团队
Praesent sodales,Pelletsque的leo,nunc erat dapibus nunc,以及orci的congue libero lorem。潜力悬钩子。临时前庭中的设施问题是莫里斯。
尼塔佩伦茨克佩伦茨克的利奥索达莱斯广场 达皮布斯·努克,奥奇的康格·里姆自由女神。潜力悬钩子。位于前庭颞侧的面部肌群。

Praesent sodales,Pelletsque的leo,nunc erat dapibus nunc,以及orci的congue libero lorem。潜力悬钩子。临时前庭中的设施问题是莫里斯。
尼塔佩伦茨克佩伦茨克的利奥索达莱斯广场 达皮布斯·努克,奥奇的康格·里姆自由女神。潜力悬钩子。位于前庭颞侧的面部肌群。

Praesent sodales,Pelletsque的leo,nunc erat dapibus nunc,以及orci的congue libero lorem。潜力悬钩子。临时前庭中的设施问题是莫里斯。
尼塔佩伦茨克佩伦茨克的利奥索达莱斯广场 达皮布斯·努克,奥奇的康格·里姆自由女神。潜力悬钩子。位于前庭颞侧的面部肌群

Praesent sodales,Pelletsque的leo,nunc erat dapibus nunc,以及orci的congue libero lorem。潜力悬钩子。临时前庭中的设施问题是莫里斯。
尼塔佩伦茨克佩伦茨克的利奥索达莱斯广场 达皮布斯·努克,奥奇的康格·里姆自由女神。潜力悬钩子。位于前庭颞侧的面部肌群

Praesent sodales,Pelletsque的leo,nunc erat dapibus nunc,以及orci的congue libero lorem。潜力悬钩子。临时前庭中的设施问题是莫里斯。
尼塔佩伦茨克佩伦茨克的利奥索达莱斯广场 达皮布斯·努克,奥奇的康格·里姆自由女神。潜力悬钩子。位于前庭颞侧的面部肌群

Praesent sodales,Pelletsque的leo,nunc erat dapibus nunc,以及orci的congue libero lorem。潜力悬钩子。临时前庭中的设施问题是莫里斯。
尼塔佩伦茨克佩伦茨克的利奥索达莱斯广场 达皮布斯·努克,奥奇的康格·里姆自由女神。潜力悬钩子。位于前庭颞侧的面部肌群


这是为了帮助您找到正确的路径-它并不完整,但会给您一个想法。检查小提琴,并四处演奏:)

我得发一些密码,才能轻松回答。但你的一个问题是,在你的正常风格中,你有一个固定的高度

@media screen and (max-width: 480px) {
    section#team div.row {
          height:auto;
    }
} 


很高兴它能为您工作。

我没有看到任何指定的样式规则能够按照您的意愿调整布局,但在某些情况下,您可能需要声明
display:block;宽度:100%