使内容响应问题

我正在将我的布局转换为响应式设计。我看了一些教程并做了一些调整。但是，当我在手机，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; 
}

来源

2013-03-01 deadendstreet

虽然列在尺寸完美，它的内容没有。例如

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

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

来源

2013-03-01 04:45:38

那么你是说我应该只使用百分比吗？或者在这种情况下宽度：100％;身高：自动？ – deadendstreet 2013-03-01 04:58:14

是的，只有百分比的宽度。身高并不重要，你可以让箱子自动化。您可以使用px作为边距和填充，但只能在将元素嵌套在％width div内，而不是使用px/em margin/padding在元素上声明宽度，因为例如它将变为100％+ 12像素。 – 2013-03-01 05:02:04

要在像素使用宽度以下类

p.description-2-COL的style.css线无439个SOLU。加它的最大宽度100％'

p.description-3-COL的style.css线无406个SOLU。加它的最大宽度100％'相同的列中.PIC-3-COL

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

涡卷图像作为第一列是根据分辨率进行

并且还使用不断chanding其wirdth百分比媒体查询

来源

2013-03-01 05:25:02

使内容响应问题

回答

相关问题