0

我正在尝试使用 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>

请注意，列在底部对齐，数据垂直堆叠。这是一个 小提琴。

4

1 回答 1

3

我正在为符合规范的浏览器使用 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]-->
于 2013-05-12T10:27:12.007 回答