DIV 레이아웃에서 행을 정렬하는 방법은 무엇입니까?

Question

나는 오래된 프로젝트에서 테이블을 제거하려고 시도하고 있지만 해결 방법을 모르는 문제를 발견했습니다. 내가 this과 같은 표를 가지고 있다면 :

<table> 
    <tr> 
     <td>First Row</td> 
     <td>Second Row</td> 
     <td>Third Row</td> 
    </tr> 
    <tr> 
     <td> 
      Some content here 
     </td> 
     <td> 
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. 
     </td> 
     <td> 
      Problem comes when columns have different content height 
     </td> 
    </tr> 
    <tr> 
     <td>This is aligned!</td> 
     <td>With this</td> 
     <td>And this!!</td> 
    </tr> 
</table> 

각 열의 가장 마지막 행이 정렬됩니다. DIV 레이아웃 디자인에서 이것을 수행하는 방법은 무엇입니까? 내 시도는 this 이었지만 예상대로 작동하지 않습니다.

Answer 1

나는 Pavel에 동의합니다. 나는 여전히 표 형식이 아닌 데이터를 삭제하는 것을 선호합니다 (표 형식의 데이터가 무엇인지 아닌지는 알 수 없지만 개인적으로 고려하지는 않습니다 ... 콘텐츠의 양에 따라 다릅니다).

목록을 사용합니다. 사업부도 좋지만리스트는 스타일하기가 더 쉽습니다 (클래스를 제공 할 필요는 없습니다). 또한 테이블에서 div로 전환하는 경우 목록에 대한 이해가 매우 잘됩니다. 많이 사용하게 될 것입니다. 그냥 다른 옵션.

편집 : 표 형식의 데이터 목록을 사용하는 것에 대해 더 많은 정보가 있습니다. 출처 : li

빌딩 http://mirificampress.com/permalink/the_amazing_li

다중 열 목록은 여러 열로 랩 빠르고 li으로 쉽다는 것을 보여줍니다. 데이터가 실제로 표 형식 인 경우 (열 머리글, 열 및 행 필요) table을 사용해야합니다. 그러나 목록의 모양을 멋지게 꾸미고 읽을 때 조금 더 쉽게 만들려면이 방법을 사용해야합니다. li의 다른 세트와 마찬가지로 다중 열 목록은 간단한 HTML 코드를 만들고 목록 항목을 쉽게 다시 정렬합니다. 여기 그것이 작동하는 방법입니다.

HTML :

<div id="list_wrapper"> 
    <ul class="multiple_columns"> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
     <li>Five</li> 
     <li>Six</li> 
     <li>Seven</li> 
     <li>Eight</li> 
     <li>Nine</li> 
    </ul> 
</div> 

CSS : 그들이 포함하는 래퍼의 폭을 채울 때까지

ul{ 
    margin: 0 auto; 
    padding: 0; 
} 

/* The wider the #list_wrapper is, the more columns will fit in it */ 
#list_wrapper{ 
    width: 200px 
} 

/* The wider this li is, the fewer columns there will be */ 
    ul.multiple_columns li{ 
     text-align: left; 
     float: left; 
     list-style: none; 
     height: 30px; 
     width: 50px; 
    } 

목록 항목은 단지 수평으로 서로 스택. 이 경우 200px 너비의 래퍼가 있고 각 목록 항목은 50px 너비로 설정됩니다. 50이 200으로 네 번 들어가므로 각 행에 네 개의 목록 항목이 있습니다.

그것을 시도를주고 당신이 행으로 컨테이너를 사용해야 할 것입니다 특정 질문 :

Answer 2

일이 그렇게 복잡하지 않게하십시오. 데이터에 테이블 모양이 필요한 경우 테이블을 제거하는 이유는 무엇입니까? 전체 페이지를 디자인 할 때 테이블 레이아웃이 좋지 않습니다. 그러나 당신이 그 기능을 필요로한다면 당신의 결정에 대해 다시 생각해보십시오.

그런데, 만약 당신이 수평으로 몇 가지 요소를 정렬하고 싶다면 별도의 div에 두는 것이 어떻습니까? 하나의 div에 넣고 div에 "float"스타일을 제거하면 서로 아래에옵니다.

Answer 3

이있는 경우 다시 와서, 그리고 Collumns는있다.