Question

这个问题实际上来自我对GWT框架的实验，但我决定简化这个问题。

我正在尝试用div替换表标记。如何水平对齐包含两个垂直对齐的DIV标记的两个DIV标记？

这就是我所拥有的：

<!doctype html>
<html>
<body>
<div style="display: block; ">
    <div style="display: inline; ">
        <div class="gwt-Label" >Name:</div>
        <div class="gwt-Label" >Address:</div>
    </div>
    <div style="display: inline; ">
        <div class="gwt-Label" >test1</div>
        <div class="gwt-Label" >test2</div>
    </div>
</div>
</body>
</html>

它在我的Chrome 15.0.874.106 m中呈现为：

Name:
Address:
test1
test2

我期望它是：

Name:    test1
Address: test2

你能帮我吗？

Answer 1

HTML表适用于表示表格数据。只是不要使用表格进行一般布局。 表格对于表格数据仍然更好。

更新：展望未来，您可能需要参考CSS3网格布局规范：http://www.w3.org/TR/css3-grid-layout/

但是，如果您因为某种原因想要使其工作，我会将所有列设置为固定宽度，向左浮动并在第一列上清除。如果要为不同的列设置不同的宽度，可以为这些列创建特定的类并设置特定的宽度。但是，如果你的表中有用户数据，你必须确保溢出：隐藏，或者它会破坏你的表。

我已将代码粘贴到此处，但我还创建了jsfiddle link。

这是html：

<div class="table">

    <div class="column first">Name:</div>
    <div class="column">test1</div>

    <div class="column first">Address:</div>
    <div class="column">test2</div>

</div>

风格：

.table .column{
   width: 100px;
   float: left;
}

.table .column.first{
   clear: left;   
}

但是，当表格中的文字发生变化时，您会遇到问题。它不会像桌子那样行事。例如，当单元格的文本换行到下一行时，它不会调整该行中所有单元格的高度，就像您期望单元格一样。因此溢出：隐藏或只使用HTML表。

希望有帮助...

Answer 2

我认为，对于这个例子，你有一个实际的表格会更合适;你也可以这样做：

<body>
    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell;">Name:</div>
            <div style="display: table-cell;">test1</div>
        </div>
        <div style="display: table-row;">
            <div style="display: table-cell;">Address:</div>
            <div style="display: table-cell;">test2</div>
        </div>
    </div>
</body>

Answer 3

    <div style="display: block; ">
        <div style="float:left">
            <div class="gwt-Label" >Name:</div>
            <div class="gwt-Label" >Address:</div>
        </div>
        <div style="float:left">
            <div class="gwt-Label" >test1</div>
            <div class="gwt-Label" >test2</div>
        </div>
<div style="clear:both"></div>
    </div>

Answer 4

CSS3只有票：

.tabl {width:400px;border:1px solid blue;display:table}
.row {height:40px;display:table-row}
.cell {border:1px solid black;display:table-cell}

然后可以将其与一个看起来像桌子的结构结合在一起。我已经包含了一个嵌套表：

<div class="tabl">
<div class="row">
    <div class="cell"> CELL one</div>
    <div class="cell"> CELL two</div>
    <div class="cell"> CELL three</div></div>
<div class="row">
    <div class="cell"> CELL four
    </div><div class="cell"> CELL five</div>
    <div class="cell"> 
        <div class="tabl">
            <div class="row">
                <div class="cell">CELL 6A</div>
                <div class="cell">CELL6B</div>
            </div>
        </div>
    </div>
</div>

如果你想要你可以省略外部包装器，不像真正的表，行和单元似乎不需要它。不幸的是，这仅适用于支持CSS3的现代浏览器，而IE3不包括IE9。

Answer 5

您的解决方案如下： - 请检查一下

<!doctypehtml>
<html>
<body>
<div class="Row">
    <div class="Cell">
        <p>Name:</p>
    </div>
    <div class="Cell">
        <p>Test1</p>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <p>Address:</p>
    </div>
    <div class="Cell">
        <p>Test2</p>
    </div>
</div>
</body>
<style type="text/css">
    .Table
    {
        display: table;
    }
    .Row
    {
        display: table-row;
    }
    .Cell
    {
        display: table-cell;
    }
</style>
</html>

Answer 6

如果您要生成动态表格结构，请尝试使用jqGrid（demo）

或者，如果你的目的不同，仍然想与div一起去？试试这个..

使用float:left;代替display:inline。 Float将div缩小到其内容大小，为其他元素留出空间。这使得其他元素可以适应浮动元素。

更正后的代码：

<!doctype html>
<html>
<body>
<div style="display: block; ">
    <div style="float:left; ">
        <div class="gwt-Label" >Name:</div>
        <div class="gwt-Label" >Address:</div>
    </div>
    <div style="float:left;">
        <div class="gwt-Label" >test1</div>
        <div class="gwt-Label" >test2</div>
    </div>
</div>
</body>
</html>

Answer 7

Moe的方式非常酷，但并不标准。这是最好的方式。

使用CSS命令“float”就像这样：

HTML代码：

<!doctype html>
<html>
<head>
    <link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="display: block; ">
    <div style="display: inline; ">
        <div class="gwt-Label" >Name:</div>
        <div class="gwt-Label" >test1</div>
    </div>
    <div style="display: inline; ">
        <div class="gwt-Label" >Address:</div>
        <div class="gwt-Label" >test2</div>
    </div>
</div>
</body>
</html>

CSS文件（Style.css）：

.gwt-Label
{
    float: left;
    width: 50%
    }

或者你可以在一个地方拥有它：

<!doctype html>
<html>
<head>

    <style type="text/css">
        .gwt-Label{
        float: left;
        width: 50%
        }
    </style>

</head>
<body>
<div style="display: block; ">
    <div style="display: inline; ">
        <div class="gwt-Label" >Name:</div>
        <div class="gwt-Label" >test1</div>
    </div>
    <div style="display: inline; ">
        <div class="gwt-Label" >Address:</div>
        <div class="gwt-Label" >test2</div>
    </div>
</div>
</body>
</html>

如何使用div标签创建表格？

7 个答案: