Trick:table 없이 DIV를 어떻게 등분합니까

SF에서 어떤 사람이 문제를 제기했다. 테이블을 사용하지 않고 어떻게 디브를 3행*3열로 나누는가.다음과 같은 세 가지 아이디어를 제공합니다.

제1식

html:

<div id="box">
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
     <div>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
     <div>
        <span>7</span>
        <span>8</span>
        <span>9</span>
    </div>
</div>

csss:

*{ margin:0 auto; padding:0; }
#box{ height:200px; width:200px; border:1px solid red; }
div div{ width:100%; height:32.855%; }
span{ display:inline-block; height:100%; width:32%; border:1px solid blue; }
#box span:nth-child(2n+2){ border:1px solid red; margin-left:-7px; }
#box span:nth-child(2n+3){ border:1px solid green; margin-left:-7px; }

온라인 미리 보기:https://jsfiddle.net/dwqs/wrj2xvhg/2/

두 번째 방식

디스플레이의table,table-row,table-cell 속성 html:

<div id="box">
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
     <div>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
     <div>
        <span>7</span>
        <span>8</span>
        <span>9</span>
    </div>
</div>

css:

*{ margin:0 auto; padding:0; }
#box{ height:200px; width:200px; border:1px solid red; display:table; }
div div{ width:100%; display:table-row; }
span{ display:table-cell; border:1px solid blue; vertical-align:middle; text-align:center; }

온라인 미리 보기: demo

세 번째 방식

css3의column-count 레이아웃을 이용하여 html:

<div id="box">
    <div id="first">
             2 24   (     )        ，
    </div>
     <div>
              2 24   (     )        ，
    </div>
     <div>
              2 24   (     )        ，
    </div>
</div>

css

*{ margin:0 auto; padding:0; }
#box{ height:200px; width:200px; border:1px solid red; }
#box>div{ width:100%; height:32.855%; border:1px solid blue; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-rule:4px outset #ff0000; /* Firefox */ -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */ column-rule:4px outset #ff0000; }
#first{ }

온라인 미리보기:column-count 구현이지만 주의해야 할 것은 열 레이아웃을 사용할 때 그 포함된 내용 자체의 폭은 반드시 용기의 폭보다 크고 용기의 폭보다 크면 스스로 열의 수를 증가시킨다.
텍스트 링크:http://www.ido321.com/1562.html
ps: 원문 아래의 평론은 네 번째 방식을 제시한다.