CSS로 이러한 요소를 재배치하는 방법은 무엇입니까?

Question

CodePen :http://codepen.io/leongaban/pen/ndFgs

그래서 2 개 컬럼, 60 % 폭과 40 % 인 오른쪽 인 왼쪽 컬럼의 테이블을 갖는다.

왼쪽 열의 가운데에는 div를 중심에두고 그 div 안에 3 개의 다른 요소 (span with a list, 다른 span 및 다른 span with a list)가 있습니다.

이러한 요소는 브라우저가 미디어 쿼리에 대해 충분히 작은 크기가 될 때까지 나란히 놓여 있어야하며, 그 결과 스팬이 서로 겹쳐 지도록합니다.

이것은 내가 무엇을 달성하고자하는의 완벽한 예입니다 : 내 문제가 놀이로 오는 곳

그러나이있다. 해당 요소가 포함 된 div가 왼쪽 테이블 열의 가운데에 중앙에 있는지 확인합니다. 나는 그것을 고정 폭을 설정해야합니다 : 요소의 이름, 제목 또는 회사가 정말 긴 경우

margin: 0 auto; 
max-width: 200px; // or width: 70%; 

는하지만, 레이아웃을 깰 것입니다.

내 레이아웃의

내 CodePen 예 : http://codepen.io/leongaban/pen/ndFgs

레이아웃 작업의 예 : 이름

그래서이 어디 너무 길기 때문에 깨진 레이아웃의

예 I 이름이 너무 길면 요소들 중 하나 (3 번째 스팬)가 의도하지 않게 2 번째 행에 던져 질 것입니다. 나는 고정 너비가 있기 때문에.

내가 생각할 수있는 유일한 해결책은 모든 스팬의 너비를 확인하는 데 jQuery을 사용하고 추가 된 너비의 합계가 부동 컨테이너의 너비보다 큰 경우 의도적으로 요소를 다시 정렬하는 것입니다.

이 문제에 대해 어떻게 생각하십니까?

Flex-box를 사용하고 싶지만 IE8 이상을 지원해야합니다. :(

Answer 1

스팬주기는 특정 폭이 오버 플로우가 새로운 라인으로 이동하게됩니다 "#the_requested"예를 들어

#the_requested { 
background: purple; 
width: 168px; 

} 

예 :. 분명히 http://codepen.io/anon/pen/zIhca

당신이를 해보고 싶어요 왼쪽 스팬의 너비가 오른쪽 스팬과 일치하면 스팬 left + center + right가 부모의 너비 여야합니다