테이블없는 레이아웃으로 변환

현재 사이트의 주요 부분 2 개를 정렬하는 데 1 개의 테이블을 사용하고 있습니다. 지금 당장 문제가 발생하므로 순수한 CSS를 사용하고 싶습니다.테이블없는 레이아웃으로 변환

왼쪽에 너비가 205px 인 네비게이션 열이 있습니다. 오른쪽 공간의 나머지 부분을 차지하고, 나는 컨테이너 (화면의 오른쪽에, 화면 너비 - 200 픽셀을 차지함)를 갖고 싶습니다.이 컨테이너에는 고정 된 높이가 없을 것입니다. navbar의 꼭대기와 정렬 될 수 있습니다.

는 여기에 내가 솔루션이 유사 할 좋아하지만 테이블을 사용하고 사이드 바 상단에 정렬 컨테이너의 상단을하지 않았을 나는 현재

이 무엇을 demo을합니다.

필자는이 작업을 수행하기 전에 (필자가 테이블을 사용하기 전과 후에) 여러 시도를했지만 그 중 누구도 원격으로 작업하지 않았습니다. 나는 최후의 수단으로 여기 와서 누군가가 도울 수 있기를 바랍니다. 참고

<div class="container"> 
    <div id="sidebar">links and whatnot go here</div> 
    <div id="sidebar2">this is the container (but its top is not aligned with the sidebar as I would like)</div>  
</div>

출처

2012-07-29 fruitcup

오히려 그것을 설명하는 것보다, 당신은 여기 내 완료 바이올린 데모를 볼 수 있습니다. [CSS - 동일한 높이 열?] (http://stackoverflow.com/questions/2114757/css-equal-height-columns) –

@ Truth 그게 내가하려는 일이 아닙니다. – fruitcup

다른 점은 무엇입니까? –

그래서 브라우저를 완벽하게 작동시키고 테이블을 사용하지 않으며 자바 스크립트를 사용하지 않는 솔루션을 제안했습니다. (나는 자랑 느낌 : 3) : 매우 일반적인, 매우 해결 문제가 http://jsfiddle.net/af9L5/

출처

2012-07-30 21:01:38 fruitcup

Fiddle

.container{height: 100%; border: 1px solid #0f0; display: table;} 
#sidebar{ 
    width:40%; height: 100%; display: table-cell; background: #ccc;  
} 
#sidebar2{ 
    width:60%; height: 100%; display: table-cell; background: #f00;  
} 
body, html { 
    height:100%; 
}

HTML : 테이블 셀 속성은 지원에서 지원 IE8 +

편집 : 당신은 테이블 셀을 사용할 수없는 경우 당신은 높이를 계산하기 위해 jquery를 사용해야합니다. 나는 이런 식으로 뭔가를 this Fiddle

출처

2012-07-29 16:35:22 Dipak

필자는 원래의 바이올린 에서처럼 사이드 바를 왼쪽 및 수직 가운데에 고정시키고 싶습니다. 게다가 이것은 테이블을 사용하는 것과 거의 같습니다. (테이블을 사용하지 않음으로써 얻을 수있는 마음의 평화는 무효화됩니다) – fruitcup

@dragonmoray 편집을 확인하십시오 – Dipak

할 것이다 체크 : fiddle

이 여기에 그냥 빠른 바이올린입니다. 나는 내일 직장에서 비슷한 것을해야한다. 그래서 나는 그것을 더 많이 테스트 할 수있다.

출처

2012-07-29 16:45:12 Viktor

테이블없는 레이아웃으로 변환

답변

관련 문제