Html 在我的网站中，当我重新调整网站大小时，图像与文本重叠

这是我使用的css

.fluid {
    clear: both;
    margin-left: 0;
    width: 100%;
    float: left;
    display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
    clear: none;
    float: none;
}
#div1 {
position: static;
}
#header {
width: 100%;
position: static;
}
.logo_container {position: static;height: auto;width: 100%;margin-left: 0;clear: both;}
.logo_mvc { 
width:200px;
height:67px;
margin-left: 0;
background-image:url(Images/mvcmbl.png);
}
.logo_gsm {width: 45.0526%;margin-left: 5.2631%;clear: none; height:100px;}
.imageslide {
width:100%;
height:auto;
position: static;
margin-left: 0;
clear: both;
}
.imageslide_gs {width: 23.7288%;
    height: 30px;
    margin-left: 0;
    position: static;
    clear: both;}
.imageslide_content {width: 49.1525%;
    height:30px;
    margin-left: 1.6949%;
    clear: none;}
.imageslide_product {   width: 22%;
    height:30px;
    margin-left: 1.6949%;
    clear: none;
}
.zeroMargin_mobile {margin-left: 0;}
.hide_mobile {display: none;}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
    width: 100%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
    clear: none;
    float: none;
    margin-left: auto;
}
#div1 {
position: static;
}
#header {width:100%;
position: static;
}
.logo_container {
position: static;
height: auto;
width: 100%;
margin-left: 2.5641%;
clear: none;
}
.logo_mvc { 
width: 300px;
height:100px;
margin-left: 0;
background-image:url(Images/mvctab.png);
}
.logo_gsm {
width: 300px;
margin-left: 2.5641%;
clear: none;
height:30px;
}
.imageslide {
    width:100%;
    height:auto;
    position: static;
    margin-left: 0;
    clear: both;
}
.imageslide_gs {
width: 23.7288%;
    height: 30px;
    margin-left: 0;
    position: static;
    clear: both;}
.imageslide_content {
width: 40%;
    height:30px;
    margin-left: 1.6949%;
    clear: none;}
.imageslide_product {
    width: 22%;
    height:30px;
    margin-left: 1.6949%;
    clear: none;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
    width: 74%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
}
#div1 {
position: static;
}
#header {
width: 100%;
position: static;
}
.logo_container {
margin-left: 0;
position: static;
height: auto;
width: 100%;
clear: both;
}
.logo_mvc {
width: 360px;
height:120px;
float:left;
margin-left: 0;
background-image:url(Images/mvc-logo.png);
}
.logo_gsm {
    width: 200px;
    height:133px;
    float:right;
    margin-left: 1.6949%;
    clear: none;
    background-image:url(Images/grandstreamlogo.png);
}
.imageslide {
    width: 100%;
    height: auto;
    position: static;
    margin-left: 1.6949%;
    clear: none;
}
.imageslide_gs {
    width: 200px;
    margin-left: 1.6949%;
    height:200px;
    position: static;
    clear: none;
}
.imageslide_content {
    width: 49.1525%;
    height:30px;
    margin-left: 1.6949%;
    clear: none;
    text-align:center;
    position:static;
    }
.imageslide_product {
    width: 200px;
    height:200px;
    position:static;
    margin-left: 1.6949%;
    clear: none;
    background-image:url(Images/producstucm.png);
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
imag{
max-width:100%;
}
}

在此代码中，“imageslide_产品（具有图像）”类与“imageslide_内容”类重叠，一旦开始从桌面到平板电脑视图重新调整站点大小（图像在平板电脑和桌面大小之间的文本中重叠）

---

有人能帮忙吗

你有例子吗？据我所见，您的

内置

.imageslide\u产品

没有设置响应，或者可能只是

imag

末尾的打字错误，而不是

image

@Paul，您能告诉我如何使imageslide\u产品内的图像响应吗？根据您的网站，有几种方法可以做到这一点。这里肯定没有什么评论，但在s.o.这个话题上已经有各种各样的问题了。