나는 며칠 동안 CSS로 3 열 레이아웃을 쓸 때 갑자기이 방법을 생각했습니다. 나는이 아이디어에 대해 조금 미쳤다. 문제가 있으면 조언을 해주세요.
3 열 레이아웃을 작성 해야하는 경우 일반적으로 다음 DIV 레이아웃 방법을 사용하도록 선택합니다.
그림 1 DIV 레이아웃
이러한 중첩 방법을 사용하면 의심 할 여지없이 코드 오류의 확률을 많이 줄일 수 있지만 동시에 그러한 레이아웃은 약간 복잡하고 나중에 유지 보수에 약간 불편합니다. 내비게이션을 레이아웃 할 때는 종종 <ul> 목록을 레이아웃에 사용하는 메소드를 사용하며 탐색은 다중 열 레이아웃으로 설명 될 수 있습니다. 이 경우 <ul>을 사용하여 페이지 다중 열을 레이아웃 할 수도 있습니다.
그림 2 DIV 레이아웃
이것은 고정 폭 레이아웃으로 유동성이 강하지 않음을 의미합니다. 유동성 레이아웃은 아직 테스트되지 않았습니다. 시간이 있으면 시도해 볼게요. 다음은이 레이아웃의 코드입니다.
<! doctype html public- // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http : //www.w3.org/1999/xhtml>
<헤드>
<meta http-equiv = content-type content = text/html; charset = utf-8 ″ />
<title> 멀티 컬럼 레이아웃에 UL을 사용하십시오 </title>
<스타일 유형 = 텍스트/CSS>
* {마진 : 0; 패딩 : 0;}
몸 {
너비 : 100%;
높이 : 100%;
배경 : #ddedfb;
}
#MainContent {
너비 : 600px;
마진 : 10px 자동;
}
#헤더,#바닥 글 {
배경 :#8AC7FA;
높이 : 80px;
Clear : 둘 다;
}
#footer {
Clear : 둘 다;
패딩 탑 : 10px;
}
#콘텐츠 {
높이 : 300px;
마진 : 10px 자동;
}
#Content ul {
목록 스타일 : 없음;
높이 : 100%;
}
#content ul li {
너비 : 150px;
높이 : 100%;
배경 :#8AC7FA;
플로트 : 왼쪽;
}
#Content ul li#li2 {
너비 : 280px;
여백 : 0 10px;
}
#content ul li#li2 ul li {
너비 : 270px;
높이 : 140px;
여백 : 5px;
배경 :#0581F0;
}
</스타일>
</head>
<body>
<div id = maincontent>
<div id = header> 이것은 머리입니다 </div>입니다
<div id = content>
<ul>
<li> 이것은 왼쪽 </li>입니다
<li id = li2 ″>
<ul>
<li> 이것은 중간의 윗부분입니다
<li> 이것은 중간의 하부입니다
</ul>
</li>
<li> 이것은 옳습니다 </li>
</ul>
</div>
<div id = footer> 이것은 바닥 </div>입니다
</div>
</body>
</html>
이 코드는 정상적으로 IE7 및 FF3 아래에 표시 될 수 있습니다. 다른 브라우저는 테스트하지 않았습니다. 더 나은 방법이 있다면 제안 할 수도 있습니다.