-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（col X 行）表中。是否可以？仅使用 CSS 而不添加任何其他 HTML 标签。如果是，那么 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

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

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

之前有几个关于这个的讨论。

如何仅使用 <div> 标签和 Css 创建表

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

祝你好运。

于 2012-10-16T19:31:03.933 回答
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 
<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 回答