CSSの特別な列

CSSで列を作成する必要があります。私は多くのデータ（名前）を持っており、Wordのように3列にする必要があります。私はテーブルを考えていない、私は動的であるために列の内容が必要です。このCSSの特別な列

John Smith | John Smith | John Smith 
John Smith | John Smith | John Smith 
John Smith | John Smith | John Smith 
John Smith | John Smith |

よう私は "ジョン" の新しい追加する場合、すべての列は、この

Joe Smith | John Smith | John Smith 
John Smith | John Smith | John Smith 
John Smith | John Smith | John Smith 
John Smith | John Smith | John Smith

のように、これはCSSで可能ですrearangeでしょうか？ありがとうございます。これはあなたのために働く

出典

2016-07-03 Ondrej Vrabel

これを確認してください：http：//www.w3schools.com/css/css3_multiple_columns.asp – moped

@mopedありがとうございますが、 "注：Internet Explorer 9以前のバージョンでは、列カウントプロパティはサポートされていません。" IEの回避策はありますか？ –

IE9はマイクロソフトでもサポートされていません。「アップグレードメッセージ」を表示するか、33％幅のdivカラムに貼り付けることができ、名前の配列を3つの部分に分割する必要があります。 – moped

HTML：

<div class="names"> 
    <div>John Smith</div> 
    <div>John Smith</div> 
    <div>John Smith</div> 
    <div>John Smith</div> 
    <div>John Smith</div> 
    <div>John Smith</div> 
    <div>John Smith</div> 
    <div>John Smith</div> 
</div>

CSS：

.names { 

    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3; 
    -webkit-column-gap: 40px; 
    -moz-column-gap: 40px; 
    column-gap: 40px; 
    -webkit-column-rule-style: solid; 
    -moz-column-rule-style: solid; 
    column-rule-style: solid; 
}

出典

2016-07-03 07:08:17 Tuhin

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
</head> 
 
<body> 
 

 
<div> 
 
<table style="width:100%"> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>John</td> 
 
    <td>John</td> 
 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>John</td> 
 
    <td>John</td> 
 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>John</td> 
 
    <td>John</td> 
 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>John</td> 
 
    <!--td>Your name here</td--> 
 
    </tr> 
 
</table> 
 
</div> 
 

 
</body> 
 
</html>

希望:)

出典

2016-07-03 06:58:54

答えて

関連する問題