반응 형 divs toruble

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%; 
} 
} 

나는 3 개의 블로그 게시물을 화면 전체에 골고루 퍼지라고 말하려고합니다. 그것은 iPad (1024px - 768px)의 크기에 도달 할 때 작동하며 두 div가 화면 전체에 고르게 퍼지지 만 3div에 대해 동일한 작업을 수행하도록 요청하면 작동하지 않습니다. 대신 세 번째 div를 다음 행으로 푸시합니다. 다른 디스플레이 : 속성을 시도했지만 아무 소용이 없습니다.

여기 예제를 볼 수 있습니다 : www.highlandplanning.com/blog.html -하지만 내가 무슨 말을하는지 보려면 큰 화면이 필요합니다.

Answer 1

여백 또는 너비를 더 작게 만드는 것을 고려하십시오. 여백이있는 경우 35 %로, 35 %는 100 %로 3 회 적합하지 않습니다.