좋아요, 1 ~ 2 주 전에 간단한 레이아웃 문제가있었습니다. 즉, 페이지의 섹션에는 헤더가 필요합니다.
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+아주 간단한 것. 웹 세계에서 테이블 혐오가 점령 된 것 같습니다. 테이블 대신 HTML 양식에 정의 목록 (DL, DD, DT) 태그를 사용하는 이유를 물었을 때 생각 나게되었습니다 . 이제 테이블 대 div / CSS의 일반적인 주제는 이전에 논의되었습니다. 예 :
- DIV 대 테이블 ; 과
- DIV 대신 테이블 .
따라서 이것은 CSS와 레이아웃 테이블에 대한 일반적인 논의가 아닙니다. 이것은 단순히 한 가지 문제에 대한 해결책입니다. CSS를 사용하여 위의 다양한 솔루션을 시도했습니다.
- 버튼 또는 버튼이 포함 된 div에 대해 오른쪽으로 플로팅합니다.
- 버튼의 상대적 위치. 과
- 상대 + 절대 위치.
이러한 솔루션 중 어느 것도 다른 이유로 만족스럽지 않았습니다. 예를 들어 상대적 위치로 인해 내 드롭 다운 메뉴가 콘텐츠 아래에 나타나는 Z- 색인 문제가 발생했습니다.
그래서 결국 다음으로 돌아 가게되었습니다.
<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
<td class="group-title">Title</td>
<td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>그리고 완벽하게 작동합니다. 그것은 간단하고 역 호환이 가능하며 (IE5에서도 작동 할 것입니다) 그냥 작동합니다. 포지셔닝이나 플로트를 망칠 필요가 없습니다.
그래서 누구든지 테이블없이 동등한 것을 할 수 있습니까?
요구 사항은 다음과 같습니다.
- 역 호환성 : FF2 및 IE6;
- 합리적인 일관성 : 여러 브라우저에서;
- 수직 중앙 : 버튼과 제목의 높이가 다릅니다. 과
- 유연성 : 위치 (패딩 및 / 또는 여백) 및 스타일을 합리적으로 정밀하게 제어 할 수 있습니다.
참고로 오늘 몇 가지 흥미로운 기사를 보았습니다.
편집 : 플로트 문제에 대해 자세히 설명하겠습니다. 이런 종류의 작품 :
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-title { float: left; padding: 8px; }
.group-buttons { float: right; padding: 8px; }
</style>
</head>
<body>
<div class="group-header">
<div class="group-title">This is my title</div>
<div class="group-buttons"><input type="button" value="Collapse"></div>
</div>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>파트에 대한 Ant P 덕분에 overflow: hidden(그래도 이유는 모르겠습니다). 여기에서 문제가 발생합니다. 제목과 버튼을 세로 중앙에 배치하고 싶다고 가정 해 보겠습니다. 요소의 높이가 다르기 때문에 문제가됩니다. 이것을 다음과 비교하십시오.
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-header td { vertical-align: middle; }
.group-title { padding: 8px; }
.group-buttons { text-align: right; }
</style>
</head>
<body>
<table class="group-header">
<tr>
<td class="group-title">This is my title</td>
<td class="group-buttons"><input type="button" value="Collapse"></td>
</tr>
</table>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>완벽하게 작동합니다.