CSS 테이블, 다양한 크기

Question

나는 사각형 격자의 일환으로 일부 <div> 상자를 표시하는 반응 레이아웃에서 일하고 있어요

: http://sl.cosd.com

이 페이지에서 볼 수있는 여섯 개 상자

은 모두 그룹 해제 행의 HTML 소스, 모든 :

<div class="control"> 
<div class="controlContent"> 
<a>SOME VARIABLE-HEIGHT CONTENT including an image which might float</a> 
</div> 
</div> 

control div의 다음에 먼저 전체, 1/2 또는 1/3 화면 너비 상자 비율 폭을 할당, 그래서 그들은 & tripl을 두 배로 화면 크기가 커짐에 따라 행이 늘어납니다. controlContent divs는 패딩, 여백, 배경, border-radius 등의 속성을 할당합니다.

나는 이것을 테이블과 같이 CSS를 통해 표시 할 수있는 표준 선형 및 스크린 판독기 상자의 선형 세트로 상상했습니다. 나는 CSS2.1 요소가 같은 속성을 할당 할 수 있습니다 알고

display: table; 
display: table-row; 
display: table-cell; 

내 주요 문제 : I합니다 (controlContent 사업부를 통해) 이러한 요소 display: table-cell를 할당 내용 내부 마진 붕괴를 방지하지만,하지 셀 같은 div에 균일 한 높이를 제공하지 않습니다. 동일한 행에있는 모든 형제에게 맞는 높이가 있어야합니다.

작은 셀은 일반적으로 그라디언트 배경이 셀의 상자 높이만을 덮는 경우 그 아래에 간격이 있습니다. (이 배열 이후의 텍스트는 때로 이러한 차이를 채 웁니다. 즉, 첫 번째 문제가 해결 될 때 사라질 가능성이 있지만 프레젠테이션 마크 업으로 해결할 수있는 또 다른 문제입니다.)

문제의 기초 : 각각 <div>은 테이블 셀처럼 동작하도록 말했지만,이 그룹핑 변경 이후 속성을 할당 할 수있는 <div>을 포함하는 요소를 그룹화 할 방법이 없으므로 그 높이와 일치하는 것이 없습니다. CSS 미디어 쿼리에 따르면 내가 익명 테이블 상자 및 익명 테이블 행 생성되는하지만,이 경우에서 사용하는 방법을 모른다 들었어요 문제에 대한 내 독서에서

. CSS :nth-child() 셀렉터를 사용하여 각 새 행의 시작 부분에 떠 다니는 상자를 지우고 싶습니다. 이러한 셀렉터를 사용하여 이러한 모든 지점에서 새 테이블 행을 만들 수도 있습니다.

나는 특정 해결책과 결혼하지 않았습니다. 이 작업을 수행하는 가장 좋은 방법을 알고 싶습니다. 특히 프리젠 테이션 마크 업을 포함하지 않는 솔루션을 찾고자합니다. 일반적인 솔루션은 6과 같이 작고 쉽게 분해 할 수있는 숫자가 아닌 가변 개수의 변수 테이블을 제공해야하기 때문에 특히 그렇습니다.

Answer 1

display:table-cell;은이어야합니다. 부모 인 div가 display:table; 인 경우 div/columns에 동일한 높이를 지정해야합니다.

Check this fiddle (원하는만큼 많은 열을 추가/제거 할 수 있습니다.)

---

또 다른 해결책은 다음 controlContent에 height:100%;을 사용할 수 있습니다, 고정 된 높이를 .control 제공하는 것입니다. 분명히

html, body, .control, .controlContent { 
    height:100%; 
} 

그냥 : 당신은 비율을 사용해야하는 경우

, 당신은 최대 html에와 body, 모든부모 컨테이너 에 .controlContent의을 높이를 선언했습니다 단순화. 일부 구형 브라우저에서는 table-cell이 제대로 렌더링되지 않기 때문에 가장 신뢰할 수있는 방법입니다.

한편, 모든 컨테이너의 높이 (픽셀 또는 백분율)를 항상 알아야합니다.

---

그런 다음, 거기에 faux column method,하지만 난 그것이 당신의 경우에 맞는 생각하지 않습니다.

---

마지막으로, (페이지가로드 될 때) 모든 controlContent 통과하고 기본적으로의 값을 설정 귀하의 경우

$(document).ready(function(){ 
    var higherContent = 0; 
    $('.controlContent').each(function() { 
     var currentHeight = $(this).height(); 
     if(currentHeight > higherContent) higherContent = currentHeight; 
    }).height(higherContent); 

}); 

같은 것 자바 스크립트/jQuery를 방법있다 변수 higherContent에서 가장 높은 값입니다. 그런 다음이 값은 모든 controlContent에 지정됩니다.

어쨌든 가장 좋은 jQuery 기능은 아마도 :-)로 작성된 것이 아니며 미디어 쿼리가 목표로하는 모든 해상도에 맞춰야 할 것입니다. 내가 당신이라면

---

, 서로 다른 해상도를 다르게 폭을 설정할 수 있도록 내가 아마의 table-cell 방법에 갈 것이고, 레이아웃 현대 데스크톱/모바일 브라우저의 대부분에 적용됩니다. 하지만 최대한 많은 장치에서 테스트해야합니다!

편집 : 최소 너비의 미디어 쿼리를 사용하고 있습니다. 이 방법으로 코드를 바꿀 수 있습니다 :

div.controlContent { 
    /* other stuff */ 
    display: block; 
    /* other stuff */ 
} 
@media only screen and (min-width: 480px) { 
    /* other stuff */ 
    div.controlContent { 
     display: table-cell; 
    } 
    /* other stuff */ 
}