CSS에서 격자를 배치하는 방법

Question

페이지를 레이아웃해야하지만 표가없는 방법을 찾아 낼 수는 없습니다. 나는 그것이 가능해야만한다는 것을 안다. 그러나 나는 테이블 기반이 아닌 솔루션을 생각할 수 없다.

목업 : 나는 큰 죄를 저지해야 할 것 것 같은

http://i.imgur.com/jSSDhIh.png는 상관없이 내가 뭘, 보이는 없습니다.

1. 이러한 요소를 위해 특별히 (분명히, 모든 악의 뿌리)
2. 하드 코딩 폭과 높이를 테이블을 만들기 : - 예를 들어, 상위 세트는 나도 할거야 것 같습니다. (#id 또는 style = 또는 일회용 클래스 모두 3 가지 모두 악으로 간주됩니다.)

이 경우에도 해당됩니까? 시나리오를 피할 수있는 현실적인 방법이 있습니까? 검색을위한 인터넷 검색은 실제로 유용한 정보가없는 쓸모없는 "테이블이 너무 많아서 테이블이 CSS 테이블이 ID 선택기 또는 스타일 속성을 사용하지 말고 재사용 가능한 클래스 여야합니다"라고합니다.

편집 : 이미 CSS 테이블 (디스플레이 : 테이블)에서이 작업을 수행했으며 용납 할 수없는 것으로 다시 던졌습니다. 나는 그것이 잘되고 여전히 좋아 보이기 때문에 괜찮다고 생각하지만 그것은 나의 부름이 아닙니다.

Answer 1

테이블은 사악하지 않습니다. 이 스택 교환 페이지에는 많은 테이블이 있습니다. 어떤 사람들은 그리드를 사용하여 행과 범위를 만들기 위해 div를 사용하려고합니다. 그들이 적절하다고 생각되는 테이블을 사용하는 것이 좋습니다. 당신이 정말로 그것을 피하면서 구부러진다면, 트위터를위한 부트 스트랩과 같은 것을 잡는 것을 고려하십시오. 비계를 사용하여 테이블없이 원하는 방식으로 항목을 정렬 할 수 있습니다.

Answer 2

이 링크를 클릭하면 HTML Tables – when and how to use tables in HTML 링크를 사용하면 테이블 사용시기를 이해하는 데 도움이 될 수 있습니다.

귀하의 모의에 테이블을 사용하지 않을 이유가 없습니다. WordPress 백엔드와 같은 형식은 테이블 형식을 사용하지만 테이블 형식을 사용합니다.

하지만 정말로 div의 레이아웃을 원한다면 CSS 격자 프레임 워크를 사용하는 것이 좋습니다. 개인적으로 zurb foundation을 사용합니다. heres the link

Answer 3

부트 스트랩을 사용하는 것이 좋습니다. 스타일을 지정할 때 많은 옵션이 제공됩니다.

는 여기에 두 개의 열 형태가 어떻게 작동하는지입니다 (. 그러나 그것은 당신의 CSS의 나머지 부분을 방해 할 수 있습니다) : 분명히 스타일이 많은 나뭇잎

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> 

<div class="row"> 

    <!-- right column --> 
    <div class="span6"> 
    <label>Subject <input type="text"></label> 
    <label>Category <select></select></label> 
    <label><input type="radio"> Permanent Change</label> 
    <label><input type="radio"> Temporary Change</label> 
    </div> 

    <!-- right column --> 
    <div class="span6"> 
    <label>Requested Approval Date <input type="text"></label> 
    Effective Dates <input type="text"> to <input type="text"> 
    </div> 

</div> 

원하는 수 있지만, 어떻게 볼 http://twitter.github.com/bootstrap/base-css.html#forms 체크 아웃 많이 할 수 있어요. 너는 <form class="form-horizontal">을 조사하고 싶을 것이다. CSS가 까다 롭다는 사실을 미리주의하십시오. <div class="control-group">이 많이 필요할 것입니다.