CSS는 웹 페이지의 다중 열 레이아웃에 ul을 사용합니다.

저자：Eve Cole 업데이트 시간：2009-05-31 01:02:37

며칠 전 CSS로 3열 레이아웃을 작성할 때 갑자기 이 방법이 생각났는데, 뭔가 잘못된 것이 있으면 언제든지 조언해 주세요.

3열 레이아웃을 작성해야 할 때 일반적으로 다음 DIV 레이아웃 방법을 사용합니다.

이러한 중첩 방법을 사용하면 의심할 여지 없이 코드 오류 가능성을 많이 줄일 수 있지만 동시에 이러한 레이아웃은 약간 복잡하고 나중에 유지 관리하기가 약간 불편합니다. 탐색을 레이아웃할 때 자주 사용하는 방법은 레이아웃에 <ul> 목록을 사용하는 것입니다. 이 경우 탐색은 다중 열 레이아웃으로 설명할 수도 있습니다. 열 레이아웃.

이는 고정 너비 레이아웃이므로 유동적 레이아웃은 아직 테스트되지 않았습니다. 시간이 나면 아래에 이 레이아웃의 코드를 붙여넣어 보겠습니다.

<!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" 콘텐츠="text/html" />
<title>다중 열 레이아웃에 UL 사용</title>
<스타일 유형="텍스트/css">
* {여백:0;}
몸 {
너비:100%;
높이:100%;
배경:#ddedfb;
}
#mainContent {
너비:600px;
여백:10px 자동;
}
#머리글,#바닥글 {
배경:#8AC7FA;
높이:80px;
지우기:둘 다;
}
#바닥글 {
지우기:둘 다;
패딩 상단:10px;
}
#콘텐츠 {
높이:300px;
여백:10px 자동;
}
#컨텐츠{
목록 스타일:없음;
높이:100%;
}
#컨텐툴리{
너비:150px;
높이:100%;
배경:#8AC7FA;
부동:왼쪽;
}
#컨텐툴리#li2 {
너비:280px;
여백:0 10px;
}
#content ul li#li2 ul li {
너비:270px;
높이:140px;
여백:5px;
배경:#0581F0;
}
</style>
</head>

<본문>
<div id="mainContent">
<div id="header">헤더입니다</div>
<div id="콘텐츠">
<ul>
<li>왼쪽입니다</li>
<li id="li2″>
<ul>
<li>가운데 윗부분입니다</li>
<li>하단 중앙 부분입니다</li>
</ul>
</li>
<li>오른쪽입니다</li>
</ul>
</div>
<div id="footer">여기가 하단입니다</div>
</div>
</body>
</html>

이 코드는 IE7 및 FF3에서 정상적으로 표시될 수 있습니다. 다른 브라우저에서는 테스트되지 않았습니다. 더 좋은 방법이 있으면 제안해 주세요.