Question

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

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 line no 439 solu。添加'max-width 100％'

p.description-3-col style.css line no 406 solu。添加'max-width 100％'

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

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

并且根据决议使用媒体查询继续以百分比表示他们的wirdth

有问题使内容响应

2 个答案: