레이아웃을 깨는 것에서 유체 격자 요소의 높이를 멈추는 법

Question

"격자"가 아니라 요소의 너비에 대한 백분율을 사용하여 일반적인 CSS 격자 레이아웃을 사용하여 사이트를 만들고 있습니다. 모바일에서 100 %에서 50 %로 33 %에서 25 %로 증가합니다. 1 칼럼, 2 칼럼, 3 칼럼, 4 칼럼이다.

나는 API를 사용하여 wordpress에서 이미지를 가져온다. 이미지 크기를 완전히 제어 할 수는 없습니다. 일부 이미지는 더 작고 일부 이미지는 실제로 큽니다.

예를 들어 내 코드, 그

.span_1_of_4 { 
width:25%; 
} 

높은 픽셀에서

.span_1_of_4 { 
width:100%; 
} 

, 높은 픽셀에서의

.span_1_of_4 { 
width:50%; 
} 

, 높은 픽셀에서의

.span_1_of_4 { 
width:33%; 
} 

라고

대부분의 이미지는 높이가 500px로 끌어 당겨졌습니다. 일부는 500px 미만이고 일부는 500px 이상 있습니다.

큰 이미지를 가져 오면 기사가 펼쳐지고 (.span_1_of_4) 전체 레이아웃이 바뀝니다. 그것은 그 밑에있는 요소들을 아래로 밀어 낸다. 기사가 500px 이상으로 이동하는 것을 허용하지 않는 CSS로 코딩 할 수있는 방법이 있습니까? 나는 이미지가 더 작을 때 처리 할 수 ​​있고, 기사 중 하나가 다른 것보다 작 으면 레이아웃을 깨지 않으며, 다른 것보다 큰 경우에만 나누기 만합니다.

아마 아주 간단한 질문이지만, 내 머리카락을 꺼내어 알아 내려고 할 것입니다. 추가

Answer 1

보십시오 : 귀하의 열에

max-width: 500px; 

.