固定元件与流体元件的组合-无工作台 [英] Combinating fixed and fluid elements - tableless

问题描述

我想结合固定元素和流动元素.使用< table> 非常容易，但是我想要 tableless .

带有 table : .只需将父元素的显示属性设置为 table .然后，子元素将显示 table-cell .固定的行显然具有固定的宽度，流体表单元格将以 100％的宽度填充剩余空间.您也可以使用 vertical-align:middle 将 .row 元素垂直居中.

此处示例

 < div class ="table">< div class ="row fixed"> FIXED ..</div>< div class ="row fluid"< FLUID ..</div></div> 

CSS

  .table {背景:#f4f4f4;显示:表；高度:100px;}.排 {显示:表格单元格；垂直对齐:中间；填充:0 20px;}.row.fixed {背景:#CCC；}.row.fluid {背景:金色；宽度:100％;} 

除了IE7及更低版本，该方法得到了很好的支持.

I want to combine a fixed and a fluid element. With <table> it is very easy, but I want tableless.

With table: http://jsfiddle.net/Tam7z/

But, how do this without tables, just with divs and CSS?

HTML:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
<td width="80" class="a">FIXED</td>
<td class="b">FLUID</td>
  </tr>
</table>

CSS:

table { background: #f4f4f4 }
.a { background: #CCC }
.b { background: #999 }

/* */
* { font-family: sans-serif }
td { padding: 5px }
p { color: #CCC; font-style: italic; margin-top: 40px; font-weight: 100 }

解决方案

Without using HTML tables, you could use CSS tables. Just set the parent element's display property to table. The children elements would then have a display of table-cell. The fixed row would obviously have a fixed width and the fluid table cell would fill the remaining space with a width of 100%. You can use vertical-align:middle to vertically center the .row elements too.

EXAMPLE HERE

<div class="table">
    <div class="row fixed">FIXED..</div>
    <div class="row fluid">FLUID..</div>
</div>

CSS

.table {
    background: #f4f4f4;
    display:table;
    height:100px;
}
.row {
    display:table-cell;
    vertical-align: middle;
    padding:0 20px;
}
.row.fixed {
    background: #CCC;
}
.row.fluid {
    background: gold;
    width:100%;
}

This approach is well supported with the exception of IE7 and lower.

这篇关于固定元件与流体元件的组合-无工作台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！