솔직히 테이블에 충실하세요. CSS가 그리드와 같은 레이아웃에 필요한 모든 도구를 제공하고 모든 브라우저가이를 안정적으로 지원할 때 테이블없는 것으로 전환하십시오.
다른 선택은 많은 해킹을 처리하고 테스트를 위해 여분의 F5 키를 얻는 것입니다.
-------------------그런 다음 결과 출력은 중앙에 수직 정렬을 사용하여 나란히 놓인 두 이미지입니다. 표에있는 두 셀의 크기는 이미지 크기에 약간의 패딩을 더한 것입니다.
이런 뜻인가요?
<!doctype html>
<html lang="en">
<head>
<title>SO question 2005928</title>
<style>
#images img {
padding: 10px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="images">
<img src="http://sstatic.net/so/img/logo.png" width="100" height="50">
<img src="http://sstatic.net/so/img/logo.png" width="50" height="100">
</div>
</body>
</html>
CSS 및 div 태그를 사용하여 유사한 레이아웃을 생성 할 수 있습니다.
이제 CSS를 사용하여 이러한 레이아웃을 구축 할 수있는 많은 도구가 있습니다. 모든 최신 웹 페이지 디자인 도구에는 이러한 기능이 있습니다.
이 도구 외에도 Yahoo Grid Builder ( Yahoo Grid Builder 링크) 와 같은 도구 도 유용 할 수 있습니다.
-------------------당신의 변경 table, tr그리고 td에 태그 div의를하고 만드는 'TD-된 div' float:left. 또는 display:inline-block(모든 관련 문제와 함께) 사용하거나 display:table-cell(모든 관련 문제와 함께) 사용하십시오.
이것은 Firefox에서 작동합니다 (다른 브라우저에서는 테스트되지 않았습니다). 테두리는 단지 설명을위한 것입니다.
<div>
<div style="float:left; width:49%;border:1px solid black;">
<img style="float:right; width:343px" src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/>
</div>
<div style="float:right; width:49%;border:1px solid black;">
<img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/>
</div>
</div>
귀하의 질문은 약간 모호하지만 (아마도 나일 수도 있음) 다음을 의미 할 수도 있습니다.
<div>
<div style="float:left; width:49%; border:1px solid black;">
<div style="margin:auto; width:343px; border:2px solid red;" >
<img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/>
</div>
</div>
<div style="float:left; width:49%; border:1px solid black;">
<div style="margin:auto; width:343px; border:2px solid red;" >
<img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/>
</div>
</div>
</div>
이것은 모든 요구 사항을 충족하지는 않지만 거의 비슷합니다.
-------------------CSS와 테이블의 "또는"개념은 잊어 버리십시오. 둘 다 당신을 벽으로 끌어 올릴 장단점이 있습니다.
CSS로 가능한 한 많이 생성하고 다른 레이아웃 문제는 테이블을 사용한다고 말합니다.
게다가 그리드 시스템과 CSS3의 TABLE-LAYOUT 및 템플릿 레이아웃 모듈 사이에서 CSS는 어쨌든 "테이블 기반"레이아웃으로 이동하고 있습니다.
-------------------내가 볼 수있는 유일한 방법은 <div>태그를 사용 하고 CSS의 부동과 같은 속성을 설정하는 것입니다.
CSS가 페이지의 스타일과 요소 자체가 아닌 요소를 정의하기 때문에 실제로 CSS에서 표를 만들 수 있다고 생각하지 않습니다.
-------------------순수 CSS를 사용하여 테이블과 같은 요소 동작합니다을 위해 사용하는 display속성과 값 table, table-row, table-cell, inline-table, 등
이것은 IE에서 지원되지 않으며 마크 업이 여전히 행 기반이기 때문에 열 레이아웃에 테이블을 사용하지 않는 목표를 다소 어긋나게합니다.
출처
https://stackoverflow.com/questions/2005928