반응 형 디자인에서 크기가 다른 요소 간 고정 간격

먼저 제목에 대해 유감스럽게 생각합니다.반응 형 디자인에서 크기가 다른 요소 간 고정 간격

유체 컨테이너와 다른 크기의 항목으로 반응적인 탐색을하려고합니다. 컨테이너의 가장자리에 첫 항목과 마지막 항목을 동일하게 유지하면서 항목 간 간격을 모든 항목에 대해 동일한 크기로 유지하는 것이 가능한지 알아야합니다 (가능한 경우).

Desired outcome Resized Result

빨간색은 모든 요소 사이에 동일해야 간격을 보여

나는 즉시 창이기 때문에 아주 쉽게 고정 폭 위의 같은 일을 할 수 있지만,이 크기를 조정하면 간격이 커지거나 크기가 줄어들지 않을 수 있습니다.

비율에 대한 해답 인 것처럼 보일 수 있지만 컨테이너 크기를 조정할 수 있기 때문에 내부의 항목은 표시 할 수 없으므로 항목이 너무 작거나 줄 끝까지 도달하지 못하면 다음 줄로 확산됩니다. 창이 너무 큽니다. 나는 또한 요소를 고정 너비로 만들고 나서 text-align:center;을 시도했지만 디자이너는 원하는 간격을 지정하지 않았습니다.

은 최신 브라우저와 IE 7 + 여기

A (심하게 제작) 바이올린의 모두와 호환되어야합니다 : http://jsfiddle.net/GGwdW/

출처

2013-07-25 Jamie Taylor

+1은 약간의 노력을 나타 냈습니다. –

이 솔루션을 확인하십시오. 도움이 될만한 질문이 있습니다. http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly –

@SergeyKochetov : 그게 효과가 있습니다. 바로 이것을 생각하고 있습니다. IE7에서는': before'와': after'가 없기 때문에 작동하지 않을 것입니다. IE7 사용자에게 조금 이상하게 보일 경우 익숙해 질 것입니다. 감사! –

확인이 솔루션은 도움이 될 수 있습니다 세 들어 "text-align: justify;" inline-block elements properly?

IE에는 텍스트 정렬 마지막 속성이 있습니다.

출처

2013-07-25 15:34:30

위의 의견을 토대로이 답변을 수락했습니다. 지금 바로 여기에서 수정하겠습니다. –

반응 형 디자인에서 크기가 다른 요소 간 고정 간격

답변

관련 문제