대신 html 테이블을 사용합니다 .. 그래도 테이블은 쉽습니다.

Question

얘들 아 프로그래머입니다. 눈에 테이블처럼 보이고 HTML 테이블을 사용하는 뭔가를 추가해야 할 때면 언제나 동료 웹에서 쓰레기가납니다. 디자이너. div에 공통 html div 구조를 어떻게 만들 수 있을까요? 그래서 그냥 테이블처럼 보이는 것을 필요로 할 때 항상 html을 붙여 넣을 수 있습니다. 그래서이 테이블 HTML 구조

<table> 
<tr><td></td><td></td></tr> 
<tr><td></td><td></td></tr> 
<tr><td></td><td></td></tr> 
</table> 

유사한 사업부 구조가 무엇인가의 경우

?

Answer 1

당신은 디스플레이 table, table-row 및 table-cell 사용할 수 있습니다 :

CSS :

.table 
{ 
    display:table; 
} 

.table-row 
{ 
    display:table-row; 
} 

.table-cell 
{ 
    display:table-cell; 
} 

HTML :

<div class="table"> 
    <div class="table-row"> 
     <div class="table-cell">1</div> 
     <div class="table-cell">2</div> 
    </div> 
    <div class="table-row"> 
     <div class="table-cell">3</div> 
     <div class="table-cell">4</div> 
    </div> 
</div> 

Demo

주 그을, table-row 및 table-cell 표시 값은 IE7 이하에서는 지원되지 않으며 IE8에는! DOCTYPE이 필요합니다.

또한 표 형식의 데이터를 표현하기 위해 표를 사용해야합니다. 표 형식의 데이터를 표현하는 데는 클래스와 함께 여러 div에 비해 의미가 더 많기 때문입니다. 레이아웃 용도로 테이블을 사용하면 안됩니다.

Answer 2

나는 단순 인라인 스타일을 사용합니다하지만 실제 프로젝트에서 그들을 권하고 싶지 않다 :

<div style="overflow: hidden"> 
    <div style="width: 50%; float: left"></div> 
    <div style="width: 50%; float: right"></div> 
    <div style="width: 50%; clear: both; float: left"></div> 
    <div style="width: 50%; float: right"></div> 
</div> 

이 많은 솔루션 중 하나입니다.

overflow: hidden 비트는 컨테이너 div를 "자체 정리"하는 데 사용됩니다 (div가 떠 다니는 자식을 둘러싸 지 않고). 세 번째 div가 모두 지워진 이유는 자체 행에서 렌더링되기 때문입니다.

편집 : div가 50 % 너비이므로 다른 모든 div를 오른쪽으로 떠일 필요가 없습니다 (왼쪽으로 모두 떠올라 서 동일하게 보일 수 있습니다). 그러나 div 사이에 약간의 여백이 필요하면 너비를 변경하면 나머지 div는 여전히 오른쪽에 정렬됩니다 (왼쪽에 모두 떠있는 경우는 그렇지 않습니다).

편집 : 실제로 표의 데이터를 마킹하는 경우 (몇 가지 의견이 제시하는 것처럼) 반드시 모든 테이블 요소를 고수해야합니다. 그것이 바로 그 때문입니다. 은 절대적으로이어야합니다. table, tr 및 td에서 div까지 같은 이름의 클래스로 전환하면됩니다.

Answer 3

표 형식의 데이터에 HTML table 요소를 사용하는 경우 동료 웹 디자이너를 다시 공격하는 것이 좋습니다.

표 형식의 데이터를 표시 할 때 HTML 표가 악의적이지 않은 경우 을 사용하려면 &을 사용하는 것이 좋습니다.

http://webdesign.about.com/od/tables/a/aa122605.htm

Answer 4

내가 제안 powerbuoy 같은 몇 가지 레이아웃을 사용하는 것이 좋습니다 것입니다하지만 당신은 다른 시나리오에서 다른 크기의 구조에 맞게 할 것이기 때문에 당신이 디자인 레이아웃을 중앙 집중화하기 위해 CSS에서 그리드 시스템을 사용 할 수 있습니다 .

.left { float:left; } 
.right { float: right } 
.onetenth { width: 10%; } 
.onetwentieth { width: 5%; } 

등등 ...

나는이 방법은 높은 성능의 결과로 많은하여 스타일을 줄일 약속.

참조 : https://github.com/stubbornella/oocss/wiki/ (객체 지향 CSS)