我正在将我的布局转换为响应式设计。我看了一些教程并做了一些调整。但是,当我在手机,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;
}
那么你是说我应该只使用百分比吗?或者在这种情况下宽度:100%;身高:自动? – deadendstreet 2013-03-01 04:58:14
是的,只有百分比的宽度。身高并不重要,你可以让箱子自动化。您可以使用px作为边距和填充,但只能在将元素嵌套在%width div内,而不是使用px/em margin/padding在元素上声明宽度,因为例如它将变为100%+ 12像素。 – 2013-03-01 05:02:04