-2

以下の形式の div タグがあります。

<div>first</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>last</div>

2X3（列X行）の表に入れたい。出来ますか？他の HTML タグを追加せずに CSS のみを使用します。はいの場合、そのための CSS は何ですか?

出力形式:
最初
1 4
2 5
3 6
最後

上記の形式のデータが必要です。申し訳ありませんが、上記の質問で形式について言及していませんでした。

4

5 に答える 5

2

このCSSを使用できます：

.div-table{
  display:table;         
  width:auto;         
  background-color:#eee;         
  border:1px solid  #666666;         
  border-spacing:5px;/*cellspacing:poor IE support for  this*/
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
}
.div-table-col{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:200px;         
  background-color:#ccc;  
}
于 2012-10-16T19:26:55.897 に答える
0

使用できます：

    ​div {
        float:left;
        width: 50%;
    }​

http://jsfiddle.net/LUMg2/を参照してください

シナリオで実際に機能することを確認するには、コンテキストが必要です。

于 2012-10-16T19:27:23.227 に答える
0

これには簡単な解決策があります。

div {widht:50%;flot:left;padding:none;position:relative}

ただし、表形式のデータを表示する場合はtable、表の目的を使用します。何かをレイアウトしたい場合は、テーブルを使用しないでください。

たぶん、定義リストがあなたのために仕事をするでしょう: http://www.w3schools.com/html/html_lists.asp

dl、dt、dd

于 2012-10-16T19:36:32.817 に答える
0

display:table-row;を使用します。次のリンクが役立つ場合があります。

http://snook.ca/archives/html_and_css/getting_your_di

これについては、以前にいくつかの議論があります。

<div> タグと Css のみを使用してテーブルを作成する方法

最終的に、実際のテーブルが必要な場合は、tableタグを使用してください。

幸運を。

于 2012-10-16T19:31:03.933 に答える
0 
<head>
<style type="text/css">

#board
{
    margin:100px 100px 100px 400px;
}
#r1,#r2,#r3
{
   display:table-row;
   width:auto;
   text-align:center;
   background-color:White;
}
#r1c1,#r1c2,#r1c3,#r2c1,#r2c2,#r2c3,#r3c1,#r3c2,#r3c3
{
    float:left;
    text-align:center;
    display:table-column;
    width:50px;
    height:50px;
    border:solid 1px;
    padding: 10px 10px 10px 10px;
    font-size:larger;
}
</style>
</head>
<body>
<div id="board">

<div id="r1">
    <div id="r1c1"></div>
    <div id="r1c2"></div>

</div>
<div id="r2">
    <div id="r2c1"></div>
    <div id="r2c2"></div>
</div>
<div id="r3">
    <div id="r3c1"></div>
    <div id="r3c2"></div>
</div>
</div>
</body>
于 2012-10-16T19:49:03.000 に答える