Question

我有以下格式的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（col X行）表中。可能吗？仅使用CSS而不添加任何其他HTML标记。如果是，那么CSS会是什么？

输出格式：
第一
1 4
2 5
3 6
最后

我想要以上格式的数据。对不起，我没有提到上述问题的格式。

Answer 1

您可以使用此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;  
}

Answer 2

您可以使用：

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

请参阅http://jsfiddle.net/LUMg2/

需要一个上下文来确保它在您的场景中真正起作用。

Answer 3

使用 display：table-row; 您可能会发现以下链接很有用。

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

之前有过几次讨论。

How create table only using <div> tag and Css

最终，如果你想要一张真正的桌子，只需使用table标签。

祝你好运。

Answer 4

有很简单的解决方案：

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

但是，如果您想显示表格数据，请使用table表示表格的用途。如果要布局某些内容，请不要使用表格。

也许定义列表会为你完成这项工作： http://www.w3schools.com/html/html_lists.asp

dl，dt，dd

Answer 5

<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>

使用div和CSS创建表

5 个答案: