유동체 레이아웃에 관한 질문

유동적 인 레이아웃을 설계하고 있습니다. 레이아웃을 코드화하는 올바른 접근 방식을 생각하고 있습니다. 아래는 제가 생각하고있는 구조입니다. CSS를 들어 유동체 레이아웃에 관한 질문

<body> 
<div id=container> 
<div id=col1></div> 
<div id=col2></div> 
</div> 
</body>

, 나는대로 컨테이너를 코딩 생각하고 {폭 : 90 %; 여백 : 0 자동; 오버 플로우 : 숨겨진} 2 COLS를 들어

, 그들은 약간 왼쪽 떠된다 % 폭 ..

당신은 내가 유체 레이아웃을 원하기 때문에, 내가 어디 픽셀 값을 사용하고 있지 않다, 볼 수 있듯이 .. 내 다른 요구 사항은

;

1 뷰포트에 따라 자동으로 조정해야합니다. 데스크톱이나 iPad에서 보았을 때 동일한 HTML 페이지가 뷰포트에 비례하여 조정되어야합니다.

2 다른 태블릿에서도 쉽게 확장 할 수있는 대부분의 데스크탑 브라우저와 iPad에서 호환 가능합니다. 위의 구조 또는 CSS에 의해 발생할 수 있습니다 생각

Pleasepoint에게 문제 (iPad에서 이에 대한 충분한 공간이있을 것입니다 있는지 확실하지 않습니다) ..

3 페이지 ..

정렬 중심을 표시한다

내 HTML 및 CSS 코드 (특히 컨테이너)가 코딩되었는지 제안 해주십시오. 정확하게. 나는 거의 똑같은 것이 500+ htmls에 적용될 것이므로이 권리를 얻는 것에 대해 약간 낙담한다 ... 그래서 나중에 어떤 종류의 중요한 이슈로도 들어가기를 원하지 않는다. ...

감사합니다

많은 ideas..I 그들 모두에게 열려입니다 제안하세요 .. ..

출처

2011-09-07 testndtv

당신은 유연성이라는 측면에서 아주 쉽게 그렇게 할 수 있습니다 :

(I 남은 스타일이 인라인이기 때문에 나는 게으르다!)

<div id="container" style="width:90%; margin:0 auto; overflow:hidden"> 
     <div id="col1" style="float:left; width:50%; background:#f90">COLUMN1</div> 
     <div id="col2" style="float:left; width:50%; background:#f00">COLUMN2</div> 
    </div>

컨테이너의 90 % 너비가 뷰포트의 90 %입니다. 열은 계산 된 90 % 너비의 50 %입니다. 당신은 참으로 상황을 타개 할 필요가 않았다, 그래서 만약 당신이

은 또한 열이 콘텐츠는 최소 폭을 결정할 수 유체 수 있어도 : 각 HTML 페이지에 걸쳐 적용해야 할 것입니다 주위에

나는 masterpages 또는 유사한을 사용합니다 - 예 500px 너비의 한 열에 이미지가있는 경우 크기를 조정하면 해당 열의 최소 너비가 500px가되어 문제가 발생할 수 있습니다. 간단히 말해서 사이트의 콘텐츠 유형과 이것이 레이아웃에 잠재적으로 영향을 줄 수있는 방법을 고려해야합니다.

출처

2011-09-07 17:07:01 Stryder

답변

관련 문제