Question

我正在尝试使用CSS创建一个通用解决方案，以表格列格式布局对象（按钮，文本等）。我遇到的问题是控制布局。 CSS列将是一个答案，但IE9及更早版本不支持唉。

如何在屏幕上水平布置列与垂直底部对齐？ - 最内部的div定义列的宽度，它的父div定义每列之间的间距。

对此方法的任何建议或建议都是最受欢迎的。

布局

<--------------------> col3
<--------------------> col3
col1 <---------------> col3
col1 <--->  col2 <---> col3
col1 <--->  col2 <---> col3

CSS

.column { float:left; height:100px; display:table; }
.col {
    vertical-align:bottom;
    display:table-cell;
    margin-right:15px;  /* this does not work */
}
.coldata { width:20px } /* no spacing - element occupies total width of object */

HTML

<div class="column">
<div class="col">
    <div class="coldata">A1</div>
    <div class="coldata">B1</div>
    <div class="coldata">C1</div>
</div>
<div class="column">  
<div class="col">
   <div class="coldata">A2</div>
   <div class="coldata">B2</div>
</div>
</div>

请注意，列在底部对齐，数据垂直堆叠。这是fiddle。

Answer 1

我正在为符合规范的浏览器使用css表：http://jsfiddle.net/eZQGQ/。

表格模型中的列 来自单元格的存在。它们不存在：未绘制带display: table-column的元素（= display:none）。在http://www.w3.org/TR/CSS2/tables.html#columns中查找。

所以选择班级.column是不幸的。：）

您必须为旧IE使用内联块。这是黑客：

<!--[if lte IE 7]><style>
  .column {
    display: inline;
    zoom: 1;
    margin-right: 15px;
  }
</style><![endif]-->

使用HTML / CSS对数据进行列化

1 个答案: