나는 테이블에있는 것에 대해 올바른 DIV 세트를 얻는 데 문제가 있습니다. 분명히, 테이블 버전은 멋지게 "크기 조정"하거나 크기를 조정하지 않습니다.
저는 개발자 인 저는 구식이기 때문에 Tables (제 뇌의 작동하는 부분, 논리적으로 형식을 지정하는 방법을 알고 있음)를 사용하지만 제 아내 인 디자이너는 DIV를 좋아하고 사용합니다 (하지만 테이블은 완전히 이해합니다).
저는 DIV를 많이 사용하지 않아서별로 좋아하지 않습니다. 거기에 일부 사용자가 실제로 DIV를 남용하고 이모로부터 삼촌을 알아낼 수 없다는 것을 쇼 전체에서 절대적으로 사용한다는 사실을 추가하십시오. 나는 최근에 다른 SO 사용자와 DIV 대 HTML에 대해 매우 열띤 토론을했습니다-그가 옳았습니다 (하지만 나도 옳았습니다) .... DIV = WORD, TABLE = EXCEL ...
아래 샘플은 테이블을 사용하여 수행 한 작업을 보여줍니다. 환상은 없지만 "블록"이 어떻게 생겼는지 알 수 있습니다. 나에게 큰 문제는 명확한 그룹화를 볼 수 없지만 테이블을 사용하면 rowspan과 colspan을 사용하여 그룹화 할 수 있지만 여전히 속임수를 사용할 수 있다는 것입니다. 다른 큰 문제는 행이 실제로 크기가 조정되거나 크기가 조정되지 않고 테이블과 동일한 높이를 유지한다는 것입니다. 반면 DIV는 그렇게하지 않습니다. 당연히 수직선은 그룹화되어 있어야하며 절대적은 없습니다.
다음과 같이 테이블 코드 :
<html>
<head/>
<body>
<table style="width:100%">
<tbody>
<tr>
<td colspan="3" style="width:66.7%">
<div id="TopSlidePane" runat="server" style="border:5px solid black;"/>
</td>
<td rowspan="3" style="width:33.3%;background-color:blue;height:100%;">
<div id="EventDiv" runat="server" style="border:5px solid black;height:100%;"/>
</td>
</tr>
<tr>
<td rowspan="2" style="background-color:purple;height:100%;">
<div id="PolDiv" runat="server" style="border:5px solid black;height:100%;"/>
</td>
<td rowspan="2" style="background-color:turquoise;height:100%;">
<div id="ResourceDiv" runat="server" style="border:5px solid black;height:100%;"/>
</td>
<td style="background-color:purple;">
<div id="TelDiv" runat="server" style="border:5px solid black;"/>
</td>
</tr>
<tr>
<td style="background-color:lime;">
<div id="CalDiv" runat="server" style="border:5px solid black;"/>
</td>
</tr>
<tr>
<td style="background-color:orange;">
<div id="ResDiv" runat="server" style="border:5px solid black;"/>
</td>
<td style="background-color:purple;">
<div id="EduDiv" runat="server" style="border:5px solid black;"/>
</td>
<td colspan="2" style="background-color:lightgreen;">
<div id="VacDiv" runat="server" style="border:5px solid black;"/>
</td>
</tr>
<tr>
<td colspan="4">
<table style="width:100%">
<tbody>
<tr>
<td style="width:40%;background-color:red;">
<div id="AmbDiv" runat="server" style="border:5px solid black;"/>
</td>
<td style="width:60%;background-color:aquamarine;">
<div id="GalDiv" runat="server" style="border:5px solid black;"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
관련 정보를 놓친 경우 미리 감사 드리며 외치십시오.
참조 : 이제 jsfiddle에서. 진정으로 감사하려면 마음대로 크기를 조정할 수있는 오프라인 버전으로 보는 것이 좋습니다.
귀하의 경우 셀을 세로로 확장해야하는 경우 특히 레이아웃이 실제로 간단한 것이 아니기 때문에 표를 사용하는 것이 좋습니다.
간단한 레이아웃에 대한 테이블의 이점을 얻으려면이 블로그 게시물을 참조 하십시오 HTML 테이블을 Div로 바꾸기
예제로 돌아가려면 div 및 CSS 만 사용하는 동등한 빌드가 있습니다. http://jsfiddle.net/6bKeY/
이 예제는 절대 위치 지정을 사용합니다. 대부분이 더 빠르고 셀의 동작을 모르기 때문에 사용할 방법을 말하기가 어렵 기 때문입니다.
또한 스타일 속성의 사용을 피하고 대신 CSS를 사용해야하며 ( 인라인 <style> 태그 대 인라인 CSS 속성 참조 ) div 요소는 태그 본문이 필요한 요소이므로 HTML을 확인하려면 닫는 태그를 사용해야합니다. 그래서
<div />
된다
<div></div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다