html - 在使内容响应时遇到问题

Question

我正在将我的布局转换为响应式设计。我查看了一些教程并进行了一些调整。但是，当我在手机、iPad 上加载页面，甚至缩小窗口时，内容会相互叠加。我的印象是使用 % 而不是像素可以解决这个问题。我错了吗？链接如下。

http://tinyurl.com/ab2fmwv

article {
width: 80%;
min-height: 100%;
margin-left: auto;
margin-right: auto;
border: solid;
position: relative;
overflow: hidden;
clear: both;
}
#two_column_left {
width: 74%;
float: left;
background-color: #FFFFFF;
}

#two_column_right {
width: 25%;
float: right;
}
.three-col-row {
width: 100%;
float: left;
padding-top: 2%;

}

.col-1 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;
}
.col-2 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;

}
.col-3 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;

}
.pic-3-col {
width: 175px;
height: 100px;
}
p.title-3-col {
color: #222020;
font-size: 1.3em;
clear: both;
}
p.description-3-col {
width: 190px;
}

Answer 1

尽管列的大小完美，但它的内容却没有。例如

.pic-3-col {
width: 175px;
height: 100px;
}

如果你想要一个响应式的流体布局，那么 CSS 中不应该有这样的值。

Answer 2

您正在为以下类使用宽度（以像素为单位）

p.description-2-col style.css 第 439 行解决方案。添加它'最大宽度 100%'

p.description-3-col style.css 行号 406 解决方案。添加它'最大宽度 100%'

.pic-3-col     style.css line no 197    solu.   add it 'max-width 100%'  </br>

在 .pic-3-col 中包装相同列的图像，因为第一列完成

并且还根据分辨率使用媒体查询不断改变他们的宽度百分比