최고의 방법으로 구현하는 3 열의를 사용하여 웹사이트 <DIV> tags?[마감]

StackOverflow https://stackoverflow.com/questions/83279

  •  01-07-2019
  •  | 
  •  

문제

내가 개발하는 3 열 웹 사이트를 사용하여 레이아웃을 다음과 같다:

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

그러나,고려의 기본 CSS'위치'성 <DIV>'s 은'정전',나 <DIV>'s 보였다 아래 다른으로 예상된다.

그래서 나는 설정 CSS property'위치'에서'친척',그리고 변경된'최고'시설의'중간'과'올바른' <DIV>'s 하-(빼기)의 높이가 이전 <DIV>.그것은 좋은 일이지만,이 방법을 가져 나에게 두 가지 문제점:

1)비록 인터넷 익스플로러 7 을 보여 세 가지 열이 올바로,그것은 여전히 유지 수직으로 스크롤 막대하는 경우 <DIV>'s 위치 아래 하나,다른 많은 흰색의 공간은 콘텐츠입니다.나는'n'좋아해야 할 것입니다.

2)높이의 이러한 요소는 변수,그래서 내가 알지 못하는 값을 설정한 각 <DIV>'s'최고'시설;고 싶지 않을 것 하드코드습니다.

그래서 제 질문은 무엇이 가장 좋은 것(단순+한)를 구현하는 방법을 이아들이고 있지 않습니다.나는 방지를 위해 절대적인 위치,그리고 나는 또 내 디자인 tableless.

도움이 되었습니까?

해결책

지 않은 경우 체크아웃 목록 떨어져 당신이해야,그것이 일부를 포함한 튜터리얼 및 지침에 대한 웹사이트 디자인입니다.

이 문서 특히는 데 도움이 됩니다.

다른 팁

주 CSS 사 니다.그것은 정말 간단하게 시작으로,아직 충분히 강력한 용도로 사용이 가능하다.

이해하기 쉬운 튜토리얼 그 예입니다.는 타이포그래피는 라이브러리를 생산하는 괜찮은 결과를 바 있습니다.

가장 쉬운 방법으로는 내가 찾은 3columns(또는 기타 수의 열 분할에서 사용 가능한 공간이 이상한다)가 YUI 그리드.가 YUI 그리드는 빌더 당신은 기본 레이아웃이 있습니다.다음과 같은 것입니다 당신에게 750px 넓은 기본적인 3 열의 레이아웃(분할 1/3 1/3 1/3)로 160 픽셀 left sidebar.그것을 변경하고 다른 폭,사이드바를 구성하고 열 분할이 정말 쉽습니다.

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"> 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>

의 번호가 있는 예제와 라이브러리를 사용할 수 있도록 할 수 있습니다!검색 할 수 있습니에서 몇 가지 이미 나열됩(목록 떨어져이 읽어야합니다).

사 Yahoo 사용자 인터페이스 라이브러리(YUI) 에서 지난 몇 사이트와 정말 좋아합니다.Yahoo 완전히 그것을 지원하고 빠른 이해하고 사용할 수 있습니다.여기에는 것은 거기에 CSS 에 대한 그리드, 할 수 있는 형식으로 당신의 페이지로 많은 열과 섹션으로 당신을 원합니다.

유이 좋지 않기 때문에 당신이 바퀴를 재발견에 대해 재단의 사이트,그리고 그들이 모든 작업을 확인하기의 그들의 기초에서 작동하는 모든 브라우저입니다.그리고 모든 최고의,그것은 무료입니다.

나 960 그리드 시스템.그것은 사용하기 간편한 가벼운 제품 css 는 devides 화면으로 12(16)열에 있습니다.당신을 위해 그것을 사용할 수 있는 3 열의 설계 및 맞춤의 나머지 부분의 컨텐츠습니다.

도 뜨 div 의 왼쪽에는 그들 모두 같은 줄에 가정이 충분한 간격 조절이 가능합니다.

고정 coloumn 설정,높이:xxxpx 것입니다 그들이 동일하다.

이 3 열의 레이아웃을 발전기 을 시도합니다.

이 코드 작업에서 내 컴퓨터와 인터넷 익스플로러 8,크롬,파이어 폭스. 

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>

첫째,상대적인 위치가 무엇을 설명:그것을 보유한 공간에서 원래의 위치를 표시합 DIV 오프셋에 의 일부 금액입니다.

는 경우에 당신은 떠 Div 그들은 스 왼쪽에서 오른쪽이지만,이 문제가 발생할 수 있습니다.

세 열 레이아웃을 사용하여 CSS 은 매우 어렵습니다.보[http://www.glish.com/css/7.asp]

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top