响应麻烦

Question

我是响应式设计的新手，我正在用我为公司制作的博客拍摄第一张照片。我正在使用媒体查询来更改将作为我的博客文章的div的宽度％和浮点数。除了这个问题，我的所有查询都很有效......

@media only screen
and (min-width: 1196px) 
and (max-width: 1667px) {

#Blog1, #Blog2, #Blog3 ,#Blog4, #Blog5, #Blog6, #Blog7, #Blog8, #Blog9 ,#Blog10, #Blog11,           
#Blog12, #Blog13, #Blog14, #Blog15 ,#Blog16, #Blog17, #Blog18, #Blog19, #Blog20, #Blog21,  
#Blog22, #Blog23, #Blog24, #Blog25 ,#Blog26, #Blog27, #Blog28, #Blog29, #Blog30, #Blog31,
#Blog32, #Blog33, #Blog34, #Blog35 ,#Blog36, #Blog37, #Blog38, #Blog39,#Blog40, #Blog41,
#Blog42, #Blog43, #Blog44, #Blog45 ,#Blog46, #Blog47, #Blog48, #Blog49
{
float:left;
margin-left:2.5%;
margin-right:2.5%;
margin-top:2%;
margin-bottom:2%;
width:30%;
}
}

我试图告诉它在屏幕上均匀分布三篇博文。当你达到iPad（1024px-768px）的大小并且它在屏幕上均匀分布两个div时它会起作用，但是当我要求它对3个div进行相同操作时它将无法工作。相反，它将第3个div推到下一行。我尝试了不同的显示：属性但无济于事。

您可以在此处查看示例：www.highlandplanning.com/blog.html - 但您需要一个大屏幕才能看到我在说什么。

Answer 1

考虑使边距或宽度变小。利润率将达到35％，35％不能达到100％3倍。