3 열 레이아웃, 동일한 높이, 중간 열 전체 크기. 여기서 "표 셀"없이 작업을 수행하는 방법에

Question

방법 3 열 레이아웃을 만들기 위해 :

• 왼쪽 열은 고정 폭
입니다
• 가운데 열은 (하지 고정) 자동 폭
• 오른쪽 열은 고정입니다

모든 컬럼 높이 (그러나 정확한 높이가 알려지지)

Examp 동일한 폭 제작 :

나는 내가 테이블을 사용하여 작업을 수행 할 수 있습니다 알고, 또는 display:table-cell하지만 테이블을 사용 wihout 그것을 할 수 있습니까? 나는 table-cell로 갈 것이지만 이전 iOS/android 모바일 장치 및 구형 브라우저에서는 작동하지 않습니다.

table-cell 없이는 CSS 해킹이 가능합니까?

편집 : 난 그냥 전체 높이 색 배경을 설정하려면이 particual 경우 (왼쪽 : 컬러 #A, 중간 : 컬러 #B, 오른쪽 : 컬러 #C)

Edit2가 : 내가 느끼는 같은 1999 테이블 레이아웃 심령 사진/귀신이 내 얼굴 앞에

EDIT3에 웃고 : 없음 JS하십시오

Answer 1

<div>을 사용하여 원하는 배경을 그려 보았습니까? 여기에 예제를 만들었습니다 http://plnkr.co/edit/WOaF3SZ9N8sswsxbZ116?p=preview

Answer 2

어쩌면이 변형 :

display:block; 
height:100px; 

Answer 3

내 바이올린에 살펴 보자 : 나는 열을 같은 높이하기 위해 자바 스크립트를 사용 했어

http://jsfiddle.net/RB9JZ/1/

다음 setMinHeight (3)에서

$(".col").setMinHeight(3); 

을, 3 = 열 수를 입력하고 각 열에 col 또는 원하는 클래스를 지정하십시오.

Answer 4

이것은 흥미로운 질문입니다. Rich는 이미 열을 계산 했으므로 모든 열을 "같은 높이"로 지정하는 문제를 해결할 것입니다. 당신이 말했듯이, 이것은 테이블 행동 없이는 매우 어렵습니다. 내가 항상 해왔 던 것은 모든 컬럼을 감싸는 div에 배경 이미지를 사용하는 것이다. 이 div는 가장 큰 열의 높이까지 자동으로 늘어나고 반복되는 배경이있는 경우 일치하는 열이 보이게됩니다. 가운데에 유체 폭을 갖는 3 개의 열이있는 특별한 경우가 있으므로 3 개의 열을 감싸기 위해 두 개의 div가 필요하고 두 개의 배경 이미지가 있어야합니다. 하나는 왼쪽으로 정렬하고 하나는 오른쪽으로 정렬합니다. 그게 말이되지 않는 경우 알려주십시오.