exp*_*ert 2 html css css-tables
这个问题实际上来自我对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
请你帮助我好吗 ？
Hom*_*er6 14
HTML表适用于表示表格数据.只是不要使用表格进行一般布局.表格仍然更适合表格数据.
更新:展望未来,您可能需要参考CSS3网格布局规范:http://www.w3.org/TR/css3-grid-layout/
但是,如果你因为某种原因想要让它工作,我会将所有列设置为固定宽度,向左浮动并在第一列上清除.如果要为不同的列设置不同的宽度,可以为这些列创建特定的类并设置特定的宽度.但是,如果表中有用户数据,则必须确保溢出:隐藏,或者它会破坏您的表.
我在这里粘贴了代码,但我也创建了一个jsfiddle链接.
这是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表.
希望有帮助......
neu*_*tik 11
我认为,对于这个例子,你有一个实际的表格会更合适; 你也可以这样做:
<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>